fix(global-search): adjust group header height to align

Author: elmarburke

plugins/global-search/src/components/GroupHeader.tsx

@@ -37,7 +37,7 @@ export const GroupHeader = memo(
                     "group w-full focus:outline-none cursor-pointer text-left data-[header=normal]:absolute data-[header=normal]:left-0 data-[header=sticky]:sticky data-[header=sticky]:-top-px data-[header=sticky]:z-10 z-20",
                     index === 0 && "data-[header=sticky]:top-0",
                     showFadeOut &&
-                        "after:content-[] after:absolute after:top-10 after:left-0 after:right-0 after:h-3 after:z-10 after:pointer-events-none after:bg-gradient-to-b after:from-modal-light dark:after:from-modal-dark after:to-transparent",
+                        "after:content-[] after:absolute after:top-(--header-height) after:left-0 after:right-0 after:h-3 after:z-10 after:pointer-events-none after:bg-gradient-to-b after:from-modal-light dark:after:from-modal-dark after:to-transparent",
                     className
                 )}
                 data-header={isSticky ? "sticky" : "normal"}
@@ -46,12 +46,12 @@ export const GroupHeader = memo(
                 {...props}
                 {...getFocusProps(headerId(entry.id))}
             >
-                <div className="h-9 mt-1 bg-modal-light dark:bg-modal-dark">
+                <div className="h-[calc(100%-5px)] mt-1 bg-modal-light dark:bg-modal-dark">
                     <hr
                         className="border-divider-light dark:border-divider-dark aria-hidden:border-modal-light dark:aria-hidden:border-modal-dark mb-1"
                         aria-hidden={index === 0}
                     />
-                    <div className="h-8 flex flex-row gap-2 rounded-lg justify-start items-center select-none overflow-hidden ps-2 group-focus-visible:bg-option-light dark:group-focus-visible:bg-option-dark group-focus-visible:text-primary-light dark:group-focus-visible:text-primary-dark">
+                    <div className="h-[calc(100%-10px)] flex flex-row gap-2 rounded-lg justify-start items-center select-none overflow-hidden ps-2 group-focus-visible:bg-option-light dark:group-focus-visible:bg-option-dark group-focus-visible:text-primary-light dark:group-focus-visible:text-primary-dark">
                         <div className="flex-shrink-0 flex gap-2 justify-start items-center">
                             <IconArrowRight
                                 className={cn(

plugins/global-search/src/components/Results.tsx

@@ -18,15 +18,21 @@ export function ResultsList({ groups }: ResultsProps) {
     const { virtualItems, virtualItemIds, stickyIndexes } = useProcessedResults(groups, collapsedGroups)
     const { setItems } = useSelection()
 
+    const computedStyles = scrollElementRef.current ? getComputedStyle(scrollElementRef.current) : null
+    const headerValue = computedStyles?.getPropertyValue("--header-height")
+    const itemValue = computedStyles?.getPropertyValue("--item-height")
+    const headerHeight = typeof headerValue === "string" ? Number.parseInt(headerValue, 10) : null
+    const itemHeight = typeof itemValue === "string" ? Number.parseInt(itemValue, 10) : null
+
     const rowVirtualizer = useVirtualizer({
         overscan: 10,
         count: virtualItems.length,
         getScrollElement: () => scrollElementRef.current,
         estimateSize: index => {
             const item = virtualItems[index]
             if (!item) return 0
-            if (item.type === "group-header") return 50
-            return 30
+            if (item.type === "group-header") return headerHeight ?? 48
+            return itemHeight ?? 30
         },
         rangeExtractor: range => {
             // TODO: This sticky index could be added and put into the result more efficiently

plugins/global-search/src/styles.css

@@ -32,6 +32,8 @@
 
     /* Spacing */
     --spacing: 5px;
+    --header-height: 48px;
+    --item-height: 30px;
 }
 
 @utility scrollbar-hidden {