From 0af0e522750f68724c0e769e3fa32c1581f9e10a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 14 Jul 2025 16:30:19 +0530
Subject: [PATCH] [WIKI-545] fix: shrinking headings in page table of contents
 #7404

---
 apps/web/core/components/pages/editor/editor-body.tsx         | 4 ++--
 .../core/components/pages/editor/summary/content-browser.tsx  | 4 ++--
 .../components/pages/editor/summary/heading-components.tsx    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index bbcc596f8..97e3ba133 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -188,10 +188,10 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                   aria-label={t("page_navigation_pane.outline_floating_button")}
                   onClick={handleOpenNavigationPane}
                 >
-                  <PageContentBrowser editorRef={editorRef} showOutline />
+                  <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
                 </div>
                 <div className="absolute top-0 right-0 opacity-0 translate-x-1/2 pointer-events-none group-hover/page-toc:opacity-100 group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:pointer-events-auto transition-all duration-300 w-52 max-h-[70vh] overflow-y-scroll vertical-scrollbar scrollbar-sm whitespace-nowrap bg-custom-background-90 p-4 rounded">
-                  <PageContentBrowser editorRef={editorRef} />
+                  <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} />
                 </div>
               </div>
             </div>
diff --git a/apps/web/core/components/pages/editor/summary/content-browser.tsx b/apps/web/core/components/pages/editor/summary/content-browser.tsx
index d22a1ec2c..507deb703 100644
--- a/apps/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -48,7 +48,7 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
   return (
     <div
       className={cn(
-        "h-full flex flex-col items-start gap-y-1 overflow-y-auto mt-2",
+        "h-full flex flex-col items-start gap-y-1 mt-2",
         {
           "gap-y-2": showOutline,
         },
@@ -62,7 +62,7 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
           return (
             <div
               key={`${marking.level}-${marking.sequence}`}
-              className="h-0.5 bg-custom-border-400 self-end rounded-sm"
+              className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-sm"
               style={{
                 width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
               }}
diff --git a/apps/web/core/components/pages/editor/summary/heading-components.tsx b/apps/web/core/components/pages/editor/summary/heading-components.tsx
index d06eaded4..eb99c470b 100644
--- a/apps/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -8,7 +8,7 @@ export type THeadingComponentProps = {
 };
 
 const COMMON_CLASSNAME =
-  "w-full py-1 text-left font-medium text-custom-text-300 hover:text-custom-primary-100 truncate transition-colors";
+  "flex-shrink-0 w-full py-1 text-left font-medium text-custom-text-300 hover:text-custom-primary-100 truncate transition-colors";
 
 export const OutlineHeading1 = ({ marking, onClick }: THeadingComponentProps) => (
   <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}>