Skip to content

Hide Info top bar button in mobile layout #127

@shuv1337

Description

@shuv1337

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

  • Info top bar button remains hidden on mobile layouts (current behavior is correct)
  • Info top bar button continues to be visible on desktop and tablet layouts (md breakpoint and above)
  • Mobile sidebar Info tab functionality remains unchanged
  • No breaking changes to keyboard shortcuts (Space+I should still work)

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions