[BUG] Header spacing issues and missing responsiveness on tablet/mobile viewports.
#558 opened on May 19, 2026
Repository metrics
- Stars
- (114 stars)
- PR merge metrics
- (PR metrics pending)
Description
Description
The homepage header of GlassyUI-Components has incorrect spacing/padding alignment between navigation items, and the layout breaks on tablet and mobile screen sizes. There is no responsive behavior implemented for smaller viewports — the header remains desktop-styled regardless of screen width, causing overflow and poor UX on handheld devices.
Issues
-
No mobile/tablet responsiveness — The header uses w-full flex justify-between items-center mb-4 but has no responsive breakpoints. On switching to tablet or mobile view, nav links overflow or stack incorrectly.
-
Missing hamburger/collapsed menu — There is no mobile navigation menu (hamburger icon or drawer). All nav links are exposed inline even on small screens.
-
Header alignment — On smaller widths, the star button and GlassyUI logo shifts and overlaps with nav items due to missing flex-wrap or breakpoint handling.
Steps to Reproduce
- Open https://ui.glass/components (or the local dev build).
- Open DevTools → Toggle device toolbar (or resize browser to tablet width ~768px and mobile ~375px).
- Observe the header — nav links overflow or collapse improperly.
- Inspect the header element: header.w-full.flex.justify-between.items-center.mb-4.
Expected Behavior
- On desktop (≥1024px): Current layout is acceptable with proper spacing between logo, nav links, and star button.
- On tablet (768px–1023px): Nav links should either wrap gracefully or collapse into a compact layout.
- On mobile (<768px): A hamburger menu or collapsible drawer should replace the horizontal nav. Logo and menu icon remain visible.
- Header spacing should be consistent with no extra bottom margin causing layout shift.
Acceptance Criteria
- Header is fully responsive across breakpoints: mobile (<768px), tablet (768px–1023px), desktop (≥1024px).
- Nav links collapse into a hamburger/drawer menu on mobile viewport.
- Logo remains visible and properly aligned on all screen sizes.
- No horizontal overflow or layout break at any viewport width.
- Existing glassmorphism styling is preserved across all breakpoints.
-
.mb-4margin on the header does not cause vertical spacing issues; adjusted or scoped properly. - Tested on Chrome, Firefox, and Safari at standard breakpoints.