awesome-bookmarks/goose
3
0
Fork 0
mirror of https://github.com/block/goose.git synced 2026-07-17 12:56:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix navigation scrolling and grid layout

Browse Source 
- Enable scrolling in push mode horizontal navigation with max-h-[50vh] constraint
- Keep 5-column grid in push mode until 900px breakpoint
- Maintain responsive 2-5 column grid for overlay mode
- Add explicit overflow-y-auto and webkit scrolling support
- Remove intermediate 2-column breakpoint in push mode
This commit is contained in:
spencrmartin
2026-01-14 10:19:27 -05:00
parent 95583c91a6
commit 2a1276ccfa
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/Layout/AppLayout.tsx
+4 -4
View File
@@ -215,12 +215,12 @@ const AppLayoutContent: React.FC<AppLayoutProps> = () => {
<div className={`flex ${flexDirection} flex-1 w-full h-full bg-background-muted`}>
{/* Navigation placement based on position - always render but let component handle visibility */}
{navigationPosition === 'top' && (
<div className="flex flex-col">
<div className="flex flex-col max-h-[50vh]">
{navigationComponent}
</div>
)}
{navigationPosition === 'left' && (
<div className="flex flex-col">
<div className="flex flex-col h-full">
{navigationComponent}
</div>
)}
@@ -230,12 +230,12 @@ const AppLayoutContent: React.FC<AppLayoutProps> = () => {
{/* Navigation placement for bottom and right - always render but let component handle visibility */}
{navigationPosition === 'bottom' && (
<div className="flex flex-col">
<div className="flex flex-col max-h-[50vh]">
{navigationComponent}
</div>
)}
{navigationPosition === 'right' && (
<div className="flex flex-col">
<div className="flex flex-col h-full">
{navigationComponent}
</div>
)}
ui/desktop/src/components/Layout/TopNavigation.tsx
+8 -4
View File
@@ -498,9 +498,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({ isExpanded, setIsE
const isPushModeHorizontal = !isOverlayMode && isHorizontal && !shouldUseBladeOverlay;
const gridClasses = isOverlayMode || isVerticalOverlay || isHorizontalOverlay
? 'grid grid-cols-2 md:grid-cols-5 gap-[2px] w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8 auto-rows-fr'
? 'grid grid-cols-2 md:grid-cols-5 gap-[2px] w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8 auto-rows-fr' // Responsive for overlay
: isPushModeHorizontal
? 'grid grid-cols-2 md:grid-cols-5 gap-[2px] w-full' // 2 cols mobile, 5 cols standard
? 'grid grid-cols-5 gap-[2px] w-full' // Always 5 cols in push mode until 900px
: 'grid grid-cols-2 gap-[2px]'; // Vertical push mode - 2 columns
const containerClasses = isOverlayMode || isHorizontalOverlay
@@ -513,11 +513,15 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({ isExpanded, setIsE
<div className={`${isOverlayMode || isVerticalOverlay || isHorizontalOverlay ? 'bg-transparent' : 'bg-background-muted'} ${containerClasses} relative z-[9998]`}>
{(isExpanded || isClosing) && (
<div
className={`${isOverlayMode || isVerticalOverlay || isHorizontalOverlay ? 'bg-transparent' : 'bg-background-muted overflow-hidden'} ${isVertical && !isOverlayMode && !isVerticalOverlay ? 'h-full' : ''} ${isPushModeHorizontal ? 'h-full' : ''} ${isClosing ? 'nav-overlay-exit' : 'nav-overlay-enter'} transition-all duration-300`}
className={`${isOverlayMode || isVerticalOverlay || isHorizontalOverlay ? 'bg-transparent' : 'bg-background-muted'} ${isVertical && !isOverlayMode && !isVerticalOverlay ? 'h-full' : ''} ${isPushModeHorizontal ? 'h-full' : ''} ${isClosing ? 'nav-overlay-exit' : 'nav-overlay-enter'} transition-all duration-300 overflow-hidden`}
>
<div
className={`${isOverlayMode || isVerticalOverlay || isHorizontalOverlay ? 'overflow-y-auto max-h-[90vh] py-4 sm:py-6 md:py-8' : 'p-1 h-full overflow-y-auto'} transition-all duration-300`}
style={{ width: isVertical && !isOverlayMode && !isVerticalOverlay ? '360px' : undefined }}
style={{
width: isVertical && !isOverlayMode && !isVerticalOverlay ? '360px' : undefined,
overflowY: 'auto',
WebkitOverflowScrolling: 'touch'
}}
>
<div
className={gridClasses}