diff --git a/src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx b/src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx index 0912260f..16a3c3bf 100644 --- a/src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx +++ b/src/apps/officer-web/Screens/Dashboard/Layout/Spotlight/Spotlight.tsx @@ -33,6 +33,20 @@ import { useSpotlightItems, type SpotlightItem } from './useSpotlightItems'; // things to collide with, and this one moved twice already. // // Escape closes, arrows move, enter goes. The mouse works, but nothing here is designed around it. +// +// ── Sizing ── +// +// Loosened 2026-08-22: the first pass reused the app's list metrics (7px tile, text-sm, py-2) and read as +// cramped, because this is not a list inside a panel — it is a modal you look at for two seconds with +// nothing else competing for the eye. So the search input leads at `text-base`, rows are `py-2.5` with a +// 9px tile, and the label is `text-[15px]` with the hint and path kept deliberately subordinate. +// +// The panel widened with them (560 → 640). Rows now carry a label, a hint and a route on one line, and the +// route is the first thing to be squeezed out — it is also the thing that disambiguates two rows with the +// same name. +// +// The results box grew 52vh → 60vh for the arithmetic reason: taller rows in the same box show fewer +// results, and the cap on how many are listed was removed for a reason. /* No cap, deliberately, and it used to be 8. @@ -94,7 +108,7 @@ const Row = ({ ev.preventDefault(); onPick(); }} - className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors ${ + className={`flex w-full items-center gap-3.5 rounded-lg px-3.5 py-2.5 text-left transition-colors ${ active ? 'bg-accent' : 'hover:bg-accent/50' }`} > @@ -112,7 +126,7 @@ const Row = ({ it put a coloured pane behind Calendar, Contacts and every plugin logo. */} ) : Icon ? ( - + ) : ( - + )} - + - {item.hint ? {item.hint} : null} + {item.hint ? ( + {item.hint} + ) : null} - {item.to} + {item.to} ); }; @@ -205,12 +221,12 @@ export const Spotlight = () => { onMouseDown={close} >
ev.stopPropagation()} >
- + { } }} placeholder="Go to…" - className="w-full bg-transparent py-3.5 text-sm text-foreground outline-none placeholder:text-muted-foreground" + className="w-full bg-transparent py-4 text-base text-foreground outline-none placeholder:text-muted-foreground" />
-
+
{results.length === 0 ? (

Nothing matches “{query}”.

) : (