From 93db4af367221ee5b50fd0a498d066d81ed13ab4 Mon Sep 17 00:00:00 2001
From: opspawn <opspawn@users.noreply.github.com>
Date: Sat, 21 Feb 2026 17:09:31 +0000
Subject: [PATCH] fix(ui): responsive navigation header for smaller screens

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.

Also improve accessibility by replacing focus:outline-none on the
mobile menu toggle button with focus-visible ring styling, ensuring
keyboard users can see the focus indicator.

Fixes #323

Signed-off-by: opspawn <opspawnhq@gmail.com>
Signed-off-by: opspawn <opspawn@users.noreply.github.com>
---
 ui/src/components/Header.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 5766c92d7..af2ae5e77 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -28,8 +28,8 @@ export function Header() {
   };
 
   return (
-    <nav className="py-4 md:py-8 border-b">
-      <div className="max-w-6xl mx-auto px-4 md:px-6">
+    <nav className="py-4 lg:py-8 border-b">
+      <div className="max-w-6xl mx-auto px-4 lg:px-6">
         <div className="flex justify-between items-center">
           <Link href="/">
             <KAgentLogoWithText className="h-5" />
@@ -37,7 +37,7 @@ export function Header() {
           
           {/* Mobile menu button */}
           <button 
-            className="md: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"
             onClick={toggleMenu}
             aria-label="Toggle menu"
           >
@@ -45,7 +45,7 @@ export function Header() {
           </button>
           
           {/* Desktop navigation */}
-          <div className="hidden md:flex items-center space-x-2 lg:space-x-4">
+          <div className="hidden lg:flex items-center space-x-4">
             <Button variant="link" className="text-secondary-foreground" asChild>
               <Link href="/" className="gap-1">
                 <HomeIcon className="h-4 w-4" />
@@ -136,7 +136,7 @@ export function Header() {
         
         {/* Mobile menu */}
         {isMenuOpen && (
-          <div className="md:hidden pt-4 pb-2 animate-in fade-in slide-in-from-top duration-300">
+          <div className="lg:hidden pt-4 pb-2 animate-in fade-in slide-in-from-top duration-300">
             <div className="flex flex-col space-y-1">
               {/* Mobile Home Link */}
               <Button variant="ghost" className="text-secondary-foreground justify-start px-1 gap-2" asChild>