From 4b3ce2f8ca4634cc04d4c2285de1454cb3beac02 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Sun, 24 Aug 2025 14:35:41 +0100
Subject: [PATCH] fix issue where going from all tools -> any tool -> read and
 back to all tools created a gap between the section headers, I also removed
 the Sign button in the quick access bar ahead of our demo

---
 .../src/components/shared/QuickAccessBar.tsx  | 31 ++++++++++---------
 frontend/src/components/tools/ToolPicker.tsx  | 30 +++++++++++++++---
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index 80ef86c83..704c2f9bf 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -54,21 +54,22 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
         handleReaderToggle();
       }
     },
-    {
-      id: 'sign',
-      name: t("quickAccess.sign", "Sign"),
-      icon:
-        <span className="material-symbols-rounded font-size-20">
-          signature
-        </span>,
-      size: 'lg',
-      isRound: false,
-      type: 'navigation',
-      onClick: () => {
-        setActiveButton('sign');
-        handleToolSelect('sign');
-      }
-    },
+    // TODO: Add sign tool
+    // {
+    //   id: 'sign',
+    //   name: t("quickAccess.sign", "Sign"),
+    //   icon:
+    //     <span className="material-symbols-rounded font-size-20">
+    //       signature
+    //     </span>,
+    //   size: 'lg',
+    //   isRound: false,
+    //   type: 'navigation',
+    //   onClick: () => {
+    //     setActiveButton('sign');
+    //     handleToolSelect('sign');
+    //   }
+    // },
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index a8dbd7993..bf0e99863 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -25,19 +25,39 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const allToolsRef = useRef<HTMLDivElement>(null);
 
-  // On resize adjust headers height to offset height
+  // Keep header heights in sync with any dynamic size changes
   useLayoutEffect(() => {
     const update = () => {
       if (quickHeaderRef.current) {
-        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight);
+        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
       }
       if (allHeaderRef.current) {
-        setAllHeaderHeight(allHeaderRef.current.offsetHeight);
+        setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
       }
     };
+
     update();
+
+    // Update on window resize
     window.addEventListener("resize", update);
-    return () => window.removeEventListener("resize", update);
+
+    // Update on element resize (e.g., font load, badge count change, zoom)
+    const observers: ResizeObserver[] = [];
+    if (typeof ResizeObserver !== "undefined") {
+      const observe = (el: HTMLDivElement | null, cb: () => void) => {
+        if (!el) return;
+        const ro = new ResizeObserver(() => cb());
+        ro.observe(el);
+        observers.push(ro);
+      };
+      observe(quickHeaderRef.current, update);
+      observe(allHeaderRef.current, update);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+      observers.forEach(o => o.disconnect());
+    };
   }, []);
 
   const { sections: visibleSections } = useToolSections(filteredTools);
@@ -152,7 +172,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               ref={allHeaderRef}
               style={{
                 position: "sticky",
-                top: quickSection ? quickHeaderHeight - 1: 0,
+                top: quickSection ? quickHeaderHeight -1 : 0,
                 zIndex: 2,
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,