From d975790e79304eca49e8fd27e7ccb472ddfe9d42 Mon Sep 17 00:00:00 2001
From: Papierkorb2292 <104673791+Papierkorb2292@users.noreply.github.com>
Date: Fri, 8 Aug 2025 09:15:01 +0200
Subject: [PATCH 1/2] Added zen mode for mobile layout (useful on tablets)

---
 apps/client/src/layouts/mobile_layout.ts       | 4 +++-
 apps/client/src/stylesheets/style.css          | 8 +++++++-
 apps/client/src/widgets/buttons/global_menu.ts | 1 -
 apps/client/src/widgets/close_zen_button.ts    | 6 ++++++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.ts b/apps/client/src/layouts/mobile_layout.ts
index ba656d445..10b6d2ebe 100644
--- a/apps/client/src/layouts/mobile_layout.ts
+++ b/apps/client/src/layouts/mobile_layout.ts
@@ -26,6 +26,7 @@ import TabRowWidget from "../widgets/tab_row.js";
 import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 import MobileEditorToolbar from "../widgets/ribbon_widgets/mobile_editor_toolbar.js";
 import { applyModals } from "./layout_commons.js";
+import CloseZenButton from "../widgets/close_zen_button.js";
 
 const MOBILE_CSS = `
 <style>
@@ -174,7 +175,8 @@ export default class MobileLayout {
                     .id("mobile-bottom-bar")
                     .child(new TabRowWidget().css("height", "40px"))
                     .child(new FlexContainer("row").class("horizontal").css("height", "53px").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true)).id("launcher-pane"))
-            );
+            )
+            .child(new CloseZenButton());
         applyModals(rootContainer);
         return rootContainer;
     }
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 716064013..224132ab4 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1886,6 +1886,7 @@ body.zen #launcher-container,
 body.zen #launcher-pane,
 body.zen #left-pane,
 body.zen #right-pane,
+body.zen #mobile-sidebar-wrapper,
 body.zen .tab-row-container,
 body.zen .tab-row-widget,
 body.zen .ribbon-container:not(:has(.classic-toolbar-widget.visible)),
@@ -1893,7 +1894,8 @@ body.zen .ribbon-container:has(.classic-toolbar-widget.visible) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget.visible)),
 body.zen .note-icon-widget,
 body.zen .title-row .button-widget,
-body.zen .floating-buttons-children > *:not(.bx-edit-alt) {
+body.zen .floating-buttons-children > *:not(.bx-edit-alt),
+body.zen .action-button {
     display: none !important;
 }
 
@@ -1935,6 +1937,10 @@ body.zen .note-title-widget input {
     background: transparent !important;
 }
 
+body.zen #detail-container {
+    width: 100%;
+}
+
 /* Content renderer */
 
 footer.file-footer,
diff --git a/apps/client/src/widgets/buttons/global_menu.ts b/apps/client/src/widgets/buttons/global_menu.ts
index 65e7d2ed1..a5d8091d2 100644
--- a/apps/client/src/widgets/buttons/global_menu.ts
+++ b/apps/client/src/widgets/buttons/global_menu.ts
@@ -363,7 +363,6 @@ export default class GlobalMenuWidget extends BasicWidget {
 
         this.$zoomState = this.$widget.find(".zoom-state");
         this.$toggleZenMode = this.$widget.find('[data-trigger-command="toggleZenMode"');
-        this.$toggleZenMode.toggle(!utils.isMobile());
         this.$widget.on("show.bs.dropdown", () => this.#onShown());
         if (this.tooltip) {
             this.$widget.on("hide.bs.dropdown", () => this.tooltip.enable());
diff --git a/apps/client/src/widgets/close_zen_button.ts b/apps/client/src/widgets/close_zen_button.ts
index fc15b6c0a..e5842dc14 100644
--- a/apps/client/src/widgets/close_zen_button.ts
+++ b/apps/client/src/widgets/close_zen_button.ts
@@ -1,5 +1,6 @@
 import BasicWidget from "./basic_widget.js";
 import { t } from "../services/i18n.js";
+import utils from "../services/utils.js";
 
 const TPL = /*html*/`\
 <div class="close-zen-container">
@@ -28,6 +29,10 @@ const TPL = /*html*/`\
         -webkit-app-region: no-drag;
     }
 
+    body.zen .mobile-close-zen-container {
+        top: -2px;
+    }
+
     body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
         left: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
         right: unset;
@@ -40,6 +45,7 @@ export default class CloseZenButton extends BasicWidget {
 
     doRender(): void {
         this.$widget = $(TPL);
+        this.$widget.toggleClass("mobile-close-zen-container", utils.isMobile())
     }
 
     zenChangedEvent() {

From 4cd4c2f60734f462aceab356e36c8d21b757eea1 Mon Sep 17 00:00:00 2001
From: Papierkorb2292 <104673791+Papierkorb2292@users.noreply.github.com>
Date: Sat, 9 Aug 2025 16:31:56 +0200
Subject: [PATCH 2/2] Apply suggestions from code review

Use `mobile` class on body to determine the style of `CloseZenButton` instead of an extra class

Co-authored-by: Elian Doran <contact@eliandoran.me>
---
 apps/client/src/widgets/close_zen_button.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/close_zen_button.ts b/apps/client/src/widgets/close_zen_button.ts
index e5842dc14..7ee4fcc28 100644
--- a/apps/client/src/widgets/close_zen_button.ts
+++ b/apps/client/src/widgets/close_zen_button.ts
@@ -29,7 +29,7 @@ const TPL = /*html*/`\
         -webkit-app-region: no-drag;
     }
 
-    body.zen .mobile-close-zen-container {
+    body.zen.mobile .close-zen-container {
         top: -2px;
     }
 
@@ -45,7 +45,6 @@ export default class CloseZenButton extends BasicWidget {
 
     doRender(): void {
         this.$widget = $(TPL);
-        this.$widget.toggleClass("mobile-close-zen-container", utils.isMobile())
     }
 
     zenChangedEvent() {