From 9d42a0c8c352e2b44fecfba7f9a8cab089425e5b Mon Sep 17 00:00:00 2001
From: Guanzhou Song <26541184+GuanzhouSong@users.noreply.github.com>
Date: Tue, 22 Sep 2026 19:47:48 -0400
Subject: [PATCH] Fix tablet navigation overflow

Signed-off-by: Guanzhou Song <26541184+GuanzhouSong@users.noreply.github.com>
---
 app/components/Navbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 9a8087a..62dcc41 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -113,7 +113,7 @@ export default function Navbar() {
             <span>DocumentDB</span>
           </Link>
 
-          <div className="hidden items-center space-x-6 md:flex lg:space-x-8">
+          <div className="hidden items-center space-x-6 xl:flex xl:space-x-8">
             {navItems.map((item) =>
               renderNavItem(
                 item,
@@ -124,7 +124,7 @@ export default function Navbar() {
 
           <button
             type="button"
-            className="inline-flex h-10 w-10 items-center justify-center rounded-md border border-neutral-700 text-gray-200 transition-colors hover:border-blue-400 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 md:hidden"
+            className="inline-flex h-10 w-10 items-center justify-center rounded-md border border-neutral-700 text-gray-200 transition-colors hover:border-blue-400 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 xl:hidden"
             aria-expanded={isMenuOpen}
             aria-controls="mobile-navigation"
             aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
@@ -143,7 +143,7 @@ export default function Navbar() {
         </div>
 
         {isMenuOpen ? (
-          <div id="mobile-navigation" className="border-t border-neutral-800 py-3 md:hidden">
+          <div id="mobile-navigation" className="border-t border-neutral-800 py-3 xl:hidden">
             <div className="flex flex-col gap-1">
               {navItems.map((item) =>
                 renderNavItem(