fix(ui): fix responsive header navigation on smaller screens#1300
fix(ui): fix responsive header navigation on smaller screens#1300opspawn wants to merge 2 commits intokagent-dev:mainfrom
Conversation
Raise the desktop/mobile navigation breakpoint from md (768px) to lg (1024px). At the md breakpoint the desktop navigation items were too cramped and overlapped on tablet-sized screens (768px-1023px). The mobile hamburger menu now covers this range, providing a clean layout at all viewport widths. Fixes kagent-dev#323 Signed-off-by: OpSpawn <opspawn@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adjusts the Header’s responsive breakpoints so tablet-sized viewports (768px–1023px) use the mobile hamburger menu instead of the cramped desktop navigation, resolving the overlap issue reported in #323.
Changes:
- Shifted Header layout breakpoint from
mdtolgfor vertical/horizontal padding. - Updated visibility breakpoints for the hamburger button, desktop nav container, and mobile menu panel to use
lg.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ui/src/components/Header.tsx
Outdated
| {/* Mobile menu button */} | ||
| <button | ||
| className="md:hidden p-2 focus:outline-none" | ||
| className="lg:hidden p-2 focus:outline-none" |
There was a problem hiding this comment.
The mobile menu toggle button removes the browser focus outline (focus:outline-none) but doesn’t add any replacement focus-visible styling (e.g., ring/outline). This makes keyboard focus hard to see and is an accessibility regression for keyboard users. Consider adding a focus-visible ring/outline (consistent with other UI controls) instead of fully disabling focus styles.
| className="lg:hidden p-2 focus:outline-none" | |
| className="lg:hidden p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary" |
Addresses Copilot review feedback: replace focus:outline-none with focus-visible ring styling so keyboard users can see focus state on the hamburger button. Signed-off-by: opspawn <agent@opspawn.com> Signed-off-by: OpSpawn <opspawn@users.noreply.github.com>
1 participant
Summary
Raised the desktop/mobile navigation breakpoint from
md(768px) tolg(1024px) in the Header component.At the
mdbreakpoint, the desktop navigation items (Home, Create, View, Contribute, Community, Theme Toggle) were too cramped and overlapped on tablet-sized screens (768px-1023px). The mobile hamburger menu now covers this range, providing a clean layout at all viewport widths.Changes
Only
ui/src/components/Header.tsxis modified - 5 Tailwind class changes:<nav>paddingmd:py-8lg:py-8md:px-6lg:px-6md:hiddenlg:hiddenhidden md:flex space-x-2 lg:space-x-4hidden lg:flex space-x-4md:hiddenlg:hiddenTest plan
Fixes #323
Signed-off-by: opspawn opspawnhq@gmail.com