fix(editor): quiet heading chat chrome in read-only history

Gate heading chat extensions when the editor is not editable and hide
residual heading widgets in history layouts for a clean read-only pad.

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/TipTap/TipTap.tsx

@@ -183,8 +183,9 @@ const Editor = ({
     Subscript,
     TextAlign,
     HeadingActionsExtension.configure({
-      hoverChat: true,
-      selectionChat: !isMobile
+      // Read-only (e.g. version history): no heading chat/comment affordances
+      hoverChat: editable,
+      selectionChat: editable && !isMobile
     }),
     HyperlinkWithMarkdown.configure({
       protocols: ['ftp', 'mailto'],

packages/webapp/src/styles/_blocks.scss

@@ -19,6 +19,7 @@
     .tiptap__editor {
       // Matches EditorContent px-6 / sm:p-8 — drives heading-action straddle offset
       --tiptap-inline-pad-end: 1.5rem;
+      height: max-content;
 
       @media (min-width: 640px) {
         --tiptap-inline-pad-end: 2rem;
@@ -50,6 +51,11 @@
     display: none !important;
   }
 
+  /* Read-only: no heading chat/comment widgets (extension off; belt-and-suspenders for decorations). */
+  .ha-wrap {
+    display: none !important;
+  }
+
   a,
   img,
   video,

packages/webapp/src/styles/_mobile.scss

@@ -267,6 +267,23 @@ html.m_mobile #__next {
       user-select: text !important;
     }
   }
+
+  /* Version history (read-only): match main mobile scroll shell; symmetric horizontal inset (no chat straddle). */
+  .history_editor {
+    .editor.editorWrapper.history-mobile-editor {
+      padding: 12px 16px 28px;
+    }
+
+    .editorWrapper .tiptap__editor.docy_editor {
+      --tiptap-inline-pad-end: 16px;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    .ProseMirror :is(h1, h2, h3, h4, h5, h6)[data-toc-id] {
+      padding-right: 0 !important;
+    }
+  }
 }
 
 .edit-fab {

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

@@ -79,10 +79,28 @@ $ha-group-has-unread: '.ha-wrap.has-selection > .ha-group:has(.ha-chat-btn[data-
     flex-shrink: 0;
     min-height: $ha-hit-size;
     padding-left: 0.5rem;
-    // Let clicks pass through the gutter; only interactive children re-enable hits
+    // Wrapper stays inert so clicks on heading text still hit the heading; a ::before bridge
+    // (hover tunnel) re-enables hits only in the gutter so moving to the docked btn doesn’t
+    // fall through to the sheet and kill :hover before pointer reaches .ha-single.
     pointer-events: none;
 
+    // Invisible strip: covers reserved padding + sheet gutter up to the translated button.
+    &:not(.has-selection)::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: calc(var(--tiptap-inline-pad-end, 1.5rem) + #{$ha-hit-size} * 1.5 + 12px);
+      min-height: $ha-hit-size;
+      height: $ha-hit-size;
+      pointer-events: auto;
+      z-index: 0;
+    }
+
     .ha-single {
+      position: relative;
+      z-index: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -107,6 +125,7 @@ $ha-group-has-unread: '.ha-wrap.has-selection > .ha-group:has(.ha-chat-btn[data-
         flex-direction: column;
         align-items: center;
         position: relative;
+        z-index: 1;
         pointer-events: auto;
 
         .ha-chat-btn {