This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch mobile-dashboard-support
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 4ef447448f31c06a897904a89caa16daae4caf4f
Author: Evan Rusackas <[email protected]>
AuthorDate: Fri Jan 9 17:47:51 2026 -0800

    fix(mobile): Keep menu horizontal on mobile for compact tabs
    
    - Remove inline menu mode switch on mobile
    - Keep horizontal mode so tabs display side-by-side
    - CSS makes tabs compact with smaller padding
    
    🤖 Generated with [Claude Code](https://claude.com/claude-code)
    
    Co-Authored-By: Claude Opus 4.5 <[email protected]>
---
 superset-frontend/src/features/home/SubMenu.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/features/home/SubMenu.tsx 
b/superset-frontend/src/features/home/SubMenu.tsx
index ab861392d2..b01aa00506 100644
--- a/superset-frontend/src/features/home/SubMenu.tsx
+++ b/superset-frontend/src/features/home/SubMenu.tsx
@@ -119,17 +119,13 @@ const StyledHeader = styled.div<{ backgroundColor?: 
string }>`
 
     /* Compact horizontal tabs on mobile (segmented-control style) */
     .menu > .ant-menu {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
       padding-left: 0;
-      gap: ${({ theme }) => theme.sizeUnit}px;
 
       .ant-menu-item {
         padding: ${({ theme }) => theme.sizeUnit}px
-          ${({ theme }) => theme.sizeUnit * 3}px;
-        margin-right: 0;
-        font-size: ${({ theme }) => theme.fontSizeXS}px;
+          ${({ theme }) => theme.sizeUnit * 2}px;
+        margin-right: ${({ theme }) => theme.sizeUnit / 2}px;
+        font-size: ${({ theme }) => theme.fontSizeSM}px;
       }
     }
   }
@@ -200,8 +196,8 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = 
props => {
 
   useEffect(() => {
     function handleResize() {
-      if (window.innerWidth <= 767) setMenu('inline');
-      else setMenu('horizontal');
+      // Keep horizontal mode on mobile - CSS handles compact display
+      setMenu('horizontal');
 
       if (
         props.buttons &&

Reply via email to