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

This commit is contained in:
EthanHealy01 2025-08-24 14:35:41 +01:00
parent b7b6bb8ee0
commit 4b3ce2f8ca
2 changed files with 41 additions and 20 deletions

View File

@ -54,21 +54,22 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
handleReaderToggle(); handleReaderToggle();
} }
}, },
{ // TODO: Add sign tool
id: 'sign', // {
name: t("quickAccess.sign", "Sign"), // id: 'sign',
icon: // name: t("quickAccess.sign", "Sign"),
<span className="material-symbols-rounded font-size-20"> // icon:
signature // <span className="material-symbols-rounded font-size-20">
</span>, // signature
size: 'lg', // </span>,
isRound: false, // size: 'lg',
type: 'navigation', // isRound: false,
onClick: () => { // type: 'navigation',
setActiveButton('sign'); // onClick: () => {
handleToolSelect('sign'); // setActiveButton('sign');
} // handleToolSelect('sign');
}, // }
// },
{ {
id: 'automate', id: 'automate',
name: t("quickAccess.automate", "Automate"), name: t("quickAccess.automate", "Automate"),

View File

@ -25,19 +25,39 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
const quickAccessRef = useRef<HTMLDivElement>(null); const quickAccessRef = useRef<HTMLDivElement>(null);
const allToolsRef = 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(() => { useLayoutEffect(() => {
const update = () => { const update = () => {
if (quickHeaderRef.current) { if (quickHeaderRef.current) {
setQuickHeaderHeight(quickHeaderRef.current.offsetHeight); setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
} }
if (allHeaderRef.current) { if (allHeaderRef.current) {
setAllHeaderHeight(allHeaderRef.current.offsetHeight); setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
} }
}; };
update(); update();
// Update on window resize
window.addEventListener("resize", update); 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); const { sections: visibleSections } = useToolSections(filteredTools);