feat(navigator): responsive layout + saved-search refinement (P4 wave 1c)

- Stack sidebar above results below sm; cap card width to viewport
- Fix tab-bar wrap overlapping content on narrow screens (max-height/height/flex reset)
- Saved-search rows: whole row opens search, hover-reveal delete (no layout shift), bolt icon, empty state
- Hover affordance on navigator grid items and saved-search rows
This commit is contained in:
simoleo89
2026-05-31 00:42:52 +02:00
committed by simoleo89
parent b17cd891b3
commit 641593c3ef
4 changed files with 61 additions and 27 deletions
@@ -15,16 +15,19 @@ export const NavigatorSearchSavesResultView: FC<NavigatorSearchSavesResultViewPr
const { searches = [] } = props;
return (
<Column className="nitro-navigator-search-saves-result min-w-[100px]">
<Flex className="rounded px-2 py-1 bg-orange-500" gap={ 1 } alignItems="center">
<Column className="nitro-navigator-search-saves-result h-full min-w-[100px] sm:w-[150px]" gap={ 1 }>
<Flex className="rounded px-2 py-1 bg-orange-500 shrink-0" gap={ 1 } alignItems="center">
<FaBolt color="white" />
<Text variant="white">{ LocalizeText('navigator.quick.links.title') }</Text>
<Text variant="white" truncate>{ LocalizeText('navigator.quick.links.title') }</Text>
</Flex>
<Column className="p-1 overflow-x-hidden overflow-y-auto">
{ (searches && searches.length > 0) &&
searches.map((search: NavigatorSavedSearch) => (
<Column className="flex-1 min-h-0 p-1 overflow-x-hidden overflow-y-auto" gap={ 0 }>
{ (searches && searches.length > 0)
? searches.map((search: NavigatorSavedSearch) => (
<NavigatorSearchSavesResultItemView key={ search.id } search={ search } />
)) }
))
: <Flex center className="py-4 opacity-30">
<FaBolt className="text-orange-500" size={ 22 } />
</Flex> }
</Column>
</Column>
);