From 2a1276ccfa3ca4368b992ba4f9351656918faf89 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Wed, 14 Jan 2026 10:19:27 -0500
Subject: [PATCH] Fix navigation scrolling and grid layout

- 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
---
 ui/desktop/src/components/Layout/AppLayout.tsx     |  8 ++++----
 ui/desktop/src/components/Layout/TopNavigation.tsx | 12 ++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/Layout/AppLayout.tsx b/ui/desktop/src/components/Layout/AppLayout.tsx
index a5e28090d6..e0f859c764 100644
--- a/ui/desktop/src/components/Layout/AppLayout.tsx
+++ b/ui/desktop/src/components/Layout/AppLayout.tsx
@@ -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>
             )}
diff --git a/ui/desktop/src/components/Layout/TopNavigation.tsx b/ui/desktop/src/components/Layout/TopNavigation.tsx
index 808e190a28..a4a482abf2 100644
--- a/ui/desktop/src/components/Layout/TopNavigation.tsx
+++ b/ui/desktop/src/components/Layout/TopNavigation.tsx
@@ -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}