duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 23:46:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navigator/NavigatorView.tsx
+4 -4
View File
@@ -109,7 +109,7 @@ export const NavigatorView: FC<{}> = props =>
<>
{ isVisible &&
<NitroCard
className={ `${ isOpenSavesSearches ? 'w-[600px] min-w-[600px]' : 'w-navigator-w min-w-navigator-w' } h-navigator-h min-h-navigator-h` }
className={ `${ isOpenSavesSearches ? 'w-[600px] sm:min-w-[600px]' : 'w-navigator-w sm:min-w-navigator-w' } max-w-[calc(100vw-1rem)] h-navigator-h min-h-navigator-h` }
uniqueKey="navigator">
<NitroCard.Header
headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
@@ -136,12 +136,12 @@ export const NavigatorView: FC<{}> = props =>
</NitroCard.Tabs>
<NitroCard.Content>
{ !isCreatorOpen &&
<div className="flex h-full overflow-hidden gap-2">
<div className="flex flex-col sm:flex-row h-full overflow-hidden gap-2">
{ isOpenSavesSearches &&
<div className="overflow-hidden pr-1 shrink-0">
<div className="overflow-hidden pr-1 shrink-0 w-full sm:w-auto max-h-40 sm:max-h-none">
<NavigatorSearchSavesResultView searches={ navigatorSearches || [] } />
</div> }
<div className="flex flex-col w-full overflow-hidden gap-2">
<div className="flex flex-col w-full min-h-0 overflow-hidden gap-2">
<NavigatorSearchView searchResult={ searchResult } />
<div ref={ elementRef } className="flex flex-col flex-1 min-h-0 overflow-auto gap-2">
{ (isFetching && !searchResult) &&