From 71d3714347f3e3e74c6d70cf7a8f9354b37575a7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 29 May 2025 17:17:29 +0530
Subject: [PATCH] (fix:nav) tablets behave like mobile, use tailwind
 breakpoints

---
 frontend/src/Navigation.tsx | 7 +++++--
 frontend/src/hooks/index.ts | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 052c3b27..57c5de45 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -197,6 +197,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             query: { conversationId: index },
           }),
         );
+        if (isMobile || isTablet) {
+          setNavOpen(false);
+        }
         if (data.agent_id) {
           if (data.is_shared_usage) {
             userService
@@ -511,8 +514,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
             <NavLink
               onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
+                if (isMobile || isTablet) {
+                  setNavOpen(false);
                 }
                 resetConversation();
               }}
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index bffcfb5c..1b9f9b87 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -35,8 +35,8 @@ export function useOutsideAlerter<T extends HTMLElement>(
 
 export function useMediaQuery() {
   const mobileQuery = '(max-width: 768px)';
-  const tabletQuery = '(max-width: 1024px)'; // Tablet breakpoint at 1024px
-  const desktopQuery = '(min-width: 1025px)'; // Desktop starts after tablet
+  const tabletQuery = '(max-width: 1023px)';
+  const desktopQuery = '(min-width: 1024px)';
   const [isMobile, setIsMobile] = useState(false);
   const [isTablet, setIsTablet] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);