Problem
The 'Info' button in the top bar is visible on mobile layouts but is redundant since there's already an 'Info' tab available in the mobile sidebar menu. The top bar button doesn't provide any additional functionality and creates unnecessary UI clutter on smaller screens.
Current Implementation
- Info button is located in the top bar at
src/app/index.tsx:3474-3484
- Button is already hidden on mobile with
className="hidden md:inline-flex"
- Mobile sidebar already includes an "Info" tab in the navigation at
src/app/index.tsx:4069
- Both trigger the same action: toggling the status sidebar panel
Acceptance Criteria
Implementation Details
The current implementation at src/app/index.tsx:3478 already uses the correct Tailwind class:
className="hidden md:inline-flex"
This hides the button on mobile (< md breakpoint) while showing it on desktop (md and above). The mobile sidebar already provides the same functionality through its tab navigation.
Reference Implementations
Based on research of React mobile navigation patterns, this follows the established best practice of:
- Using
useMediaQuery or breakpoint-based conditional rendering
- Moving top bar actions to hamburger menus on mobile
- Avoiding duplicate functionality between top bar and mobile menu
Examples from major projects:
- Material-UI:
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
- Bluesky Social: Conditional rendering based on
gtMobile breakpoint
- React Admin: Hiding top bar buttons with
hidden md:flex patterns
Files to Review
src/app/index.tsx:3474-3484 - Info button implementation
src/app/index.tsx:4069 - Mobile sidebar Info tab
src/app/_components/ui/hamburger-menu.tsx - Mobile menu trigger
src/app/_components/ui/mobile-sidebar.tsx - Mobile sidebar component
Testing
- Verify Info button is hidden on mobile (< 768px)
- Verify Info button is visible on tablet/desktop (≥ 768px)
- Confirm mobile sidebar Info tab works correctly
- Test keyboard shortcut Space+I functionality on all screen sizes
Problem
The 'Info' button in the top bar is visible on mobile layouts but is redundant since there's already an 'Info' tab available in the mobile sidebar menu. The top bar button doesn't provide any additional functionality and creates unnecessary UI clutter on smaller screens.
Current Implementation
src/app/index.tsx:3474-3484className="hidden md:inline-flex"src/app/index.tsx:4069Acceptance Criteria
Implementation Details
The current implementation at
src/app/index.tsx:3478already uses the correct Tailwind class:This hides the button on mobile (
< mdbreakpoint) while showing it on desktop (mdand above). The mobile sidebar already provides the same functionality through its tab navigation.Reference Implementations
Based on research of React mobile navigation patterns, this follows the established best practice of:
useMediaQueryor breakpoint-based conditional renderingExamples from major projects:
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));gtMobilebreakpointhidden md:flexpatternsFiles to Review
src/app/index.tsx:3474-3484- Info button implementationsrc/app/index.tsx:4069- Mobile sidebar Info tabsrc/app/_components/ui/hamburger-menu.tsx- Mobile menu triggersrc/app/_components/ui/mobile-sidebar.tsx- Mobile sidebar componentTesting