From d2e91016754142033146cdf625e3ad3b6349c888 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 3 Nov 2025 00:14:44 +0200
Subject: [PATCH] style/zen mode/fixed formatting toolbar: allow items to
 overflow if narrow window

---
 apps/client/src/stylesheets/style.css | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 615950d6a..f8d4e8b18 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -2123,13 +2123,14 @@ body.zen .note-split .ribbon-container {
     left: 0;
     bottom: 20px;
     width: 100%;
-    z-index: 100000;
+    z-index: 1000;
+    opacity: 0; /* Hidden unless the current note split is focused */
     pointer-events: none;
-    visibility: hidden; /* Hidden unless the current note split is focused */
+    transition: opacity 100ms linear;
 }
 
 body.zen .note-split:focus-within .ribbon-container {
-    visibility: visible; /* Show when the note split is focused */
+    opacity: 1; /* Show when the note split is focused */
 }
 
 body.zen .note-split .ribbon-container .ribbon-body {
@@ -2144,9 +2145,29 @@ body.zen .note-split .ribbon-container .classic-toolbar-widget {
     border: 1px solid var(--main-border-color);
     padding: 4px;
     background: var(--menu-background-color);
+}
+
+body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
     pointer-events: all;
 }
 
+@media (max-width: 1300px) {
+    body.zen .note-split .ribbon-container .classic-toolbar-widget {
+        /* Set the toolbar to full with */
+        width: 100%;
+    }
+
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+        /* Force toolbar items overflow dropdowns open upwards */
+        top: auto;
+        bottom: 100%;
+    }
+}
+
 /* Content renderer */
 
 footer.file-footer,