fix(mobile): make history view scrollable and layout stable

- Root layout: min-h-0 and flex so editor content can scroll
- Editor content wrappers: flex-1 min-h-0 and overflow for correct scroll
  behavior in flex layout

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/pages/history/mobile/EditorContent.tsx

@@ -8,7 +8,7 @@ const EditorContent = () => {
 
   if (loadingHistory || !editor) {
     return (
-      <div className="editorWrapper flex h-full w-full grow items-start justify-center overflow-y-auto border-t-0">
+      <div className="editorWrapper flex h-full min-h-0 w-full flex-1 items-start justify-center overflow-y-auto border-t-0">
         <div className={'ProseMirror tiptap__editor w-full'}>
           <DocumentSimpleLoader className="heading !h-auto" level="1" />
           <DocumentWithPictureLoader className="heading !h-auto" level="1" />
@@ -19,8 +19,8 @@ const EditorContent = () => {
   }
 
   return (
-    <div className="editor relative flex size-full w-full max-w-full flex-col justify-around align-top">
-      <div className="editorWrapper flex h-full grow items-start justify-center overflow-hidden overflow-y-auto border-t-0 p-0">
+    <div className="editor relative flex size-full min-h-0 w-full max-w-full flex-col justify-around align-top">
+      <div className="editorWrapper flex min-h-0 flex-1 items-start justify-center overflow-y-auto border-t-0 p-0">
         <TiptapEditorContent editor={editor} className="tiptap__editor relative" />
       </div>
     </div>

packages/webapp/src/components/pages/history/mobile/MobileHistory.tsx

@@ -29,10 +29,11 @@ const MobileHistory = () => {
   useHocuspocusStateless()
 
   return (
-    <div
-      className={`pad tiptap history_editor border-base-300 relative flex flex-col border-solid`}>
+    <div className="pad tiptap history_editor border-base-300 relative flex h-dvh min-h-0 flex-col border-solid">
       <Toolbar />
-      <EditorContent />
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <EditorContent />
+      </div>
       <MobileLeftSidePanel />
     </div>
   )

packages/webapp/src/styles/_mobile.scss

@@ -291,6 +291,18 @@ html.m_mobile #__next {
     0 1px 18px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent);
 }
 
+[data-theme='docsplus-dark'] .edit-fab,
+[data-theme='docsplus-dark-hc'] .edit-fab {
+  box-shadow:
+    0 4px 6px -1px color-mix(in oklch, var(--color-base-content) 12%, transparent),
+    0 8px 12px 0 color-mix(in oklch, var(--color-base-content) 8%, transparent);
+}
+
+[data-theme='docsplus-dark'] .ha-single.btnOpenChatBox,
+[data-theme='docsplus-dark-hc'] .ha-single.btnOpenChatBox {
+  box-shadow: 0 2px 6px color-mix(in oklch, var(--color-base-content) 10%, transparent);
+}
+
 .headingSelection {
   &.is-active {
     background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);

packages/webapp/src/styles/components/_heading-actions.scss

@@ -74,6 +74,17 @@
     }
   }
 
+  // Dark: softer shadow so no light halo on dark canvas
+  [data-theme='docsplus-dark'] &:hover .ha-wrap.has-selection > .ha-group,
+  [data-theme='docsplus-dark-hc'] &:hover .ha-wrap.has-selection > .ha-group,
+  [data-theme='docsplus-dark'] & .ha-wrap.has-selection > .ha-group[data-unread-count]:not([data-unread-count='']),
+  [data-theme='docsplus-dark-hc'] & .ha-wrap.has-selection > .ha-group[data-unread-count]:not([data-unread-count='']) {
+    box-shadow:
+      0 1px 3px 0 color-mix(in oklch, var(--color-base-content) 6%, transparent),
+      0 1px 2px 0 color-mix(in oklch, var(--color-base-content) 4%, transparent),
+      0 0 0 1px color-mix(in oklch, var(--color-base-content) 3%, transparent);
+  }
+
   // Unread-only extras (force visibility)
   // Badge styles are in _unread-badge.scss
   .ha-wrap.has-selection > .ha-group[data-unread-count]:not([data-unread-count='']) {

packages/webapp/src/styles/styles.scss

@@ -846,6 +846,24 @@ $crinkle-transition: ease-out;
   }
 }
 
+/* ---------------------------------------------------------------------------
+   react-modal-sheet — theme-aware so sheets (chatroom, notifications, filters,
+   emoji picker) respect light/dark/dark-hc. Library defaults are light-only.
+   --------------------------------------------------------------------------- */
+.react-modal-sheet-container {
+  background-color: var(--color-base-100) !important;
+  border-top-left-radius: var(--radius-box, 1rem);
+  border-top-right-radius: var(--radius-box, 1rem);
+}
+
+.react-modal-sheet-content {
+  background-color: var(--color-base-100) !important;
+}
+
+.react-modal-sheet-backdrop {
+  background: color-mix(in oklch, var(--color-base-content) 40%, transparent) !important;
+}
+
 .react-modal-sheet-header {
   padding-top: 4px !important;
   height: 20px !important;