From e23b2f3dddf3cb4d04f384a3e9c2c4badcf68715 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 10 Apr 2025 14:07:44 +0300
Subject: [PATCH] fix(mobile): bring back scrolling to toolbar

---
 .../ribbon_widgets/mobile_editor_toolbar.ts   | 69 +++++++++----------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts b/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts
index bb121f365..6f87de40e 100644
--- a/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts
+++ b/src/public/app/widgets/ribbon_widgets/mobile_editor_toolbar.ts
@@ -1,54 +1,47 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 
 const TPL = /*html*/`\
-<div class="classic-toolbar-widget"></div>
+<div class="classic-toolbar-outer-container">
+    <div class="classic-toolbar-widget"></div>
+</div>
 
 <style>
+    .classic-toolbar-outer-container.visible {
+        height: 38px;
+        background-color: var(--main-background-color);
+        position: relative;
+        overflow: visible;
+        flex-shrink: 0;
+    }
+
     .classic-toolbar-widget {
-        --ck-color-toolbar-background: transparent;
-        --ck-color-button-default-background: transparent;
-        --ck-color-button-default-disabled-background: transparent;
-        min-height: 39px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 38px;
+        overflow: scroll;
+        display: flex;
+        align-items: flex-end;
+        user-select: none;
+    }
+
+    .classic-toolbar-widget.dropdown-active {
+        height: 50vh;
     }
 
     .classic-toolbar-widget .ck.ck-toolbar {
+        --ck-color-toolbar-background: transparent;
+        --ck-color-button-default-background: transparent;
+        --ck-color-button-default-disabled-background: transparent;
+        position: absolute;
+        background-color: transparent;
         border: none;
     }
 
     .classic-toolbar-widget .ck.ck-button.ck-disabled {
         opacity: 0.3;
     }
-
-    body.mobile .classic-toolbar-widget {
-        display: none;
-    }
-
-    body.mobile .classic-toolbar-widget.visible {
-        display: flex;
-        align-items: flex-end;
-        overflow-x: auto;
-        overscroll-behavior: none;
-        z-index: 500;
-        user-select: none;
-    }
-
-    body.mobile .classic-toolbar-widget.visible::-webkit-scrollbar {
-        height: 3px;
-    }
-
-    body.mobile .classic-toolbar-widget.dropdown-active {
-        height: 50vh;
-    }
-
-    body.mobile .classic-toolbar-widget .ck.ck-toolbar {
-        position: absolute;
-        background-color: var(--main-background-color);
-    }
-
-    body.mobile .classic-toolbar-widget .ck.ck-dropdown__panel {
-        bottom: 100% !important;
-        top: unset !important;
-    }
 </style>
 `;
 
@@ -64,6 +57,7 @@ const TPL = /*html*/`\
 export default class MobileEditorToolbar extends NoteContextAwareWidget {
 
     private observer: MutationObserver;
+    private $innerWrapper!: JQuery<HTMLElement>;
 
     constructor() {
         super();
@@ -76,6 +70,7 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.$innerWrapper = this.$widget.find(".classic-toolbar-widget");
         this.contentSized();
 
         // Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
@@ -88,7 +83,7 @@ export default class MobileEditorToolbar extends NoteContextAwareWidget {
 
     #onDropdownStateChanged(e: MutationRecord[]) {
         const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e);
-        this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
+        this.$innerWrapper.toggleClass("dropdown-active", dropdownActive);
     }
 
     async #shouldDisplay() {