From 55ebf9ebd07d9334db78ba7ad5af9395104e7253 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:46:44 +0100
Subject: [PATCH] Bug/v2/all tools section headers gap (#4275)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Description of Changes

<img width="701" height="574" alt="Screenshot 2025-08-24 at 2 42 22 PM"
src="https://github.com/user-attachments/assets/a5b74eca-176d-4e34-b1da-c5d024a04896"
/>

to:

<img width="731" height="542" alt="Screenshot 2025-08-24 at 2 42 41 PM"
src="https://github.com/user-attachments/assets/4e6b0632-5581-4e20-ba62-81ba2fafcb4a"
/>


---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../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 d81bf5ef0..9a46c8a3e 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)`,