fix: adaptive #3

frontend/src/app/providers/layout/layout.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect, type ReactNode } from "react";
 import { Sidebar } from "@/app/providers/layout/sidebar/sidebar";
-import { Navigation } from "@/app/providers/layout/navigation/navigation";
+import {
+  Navigation,
+  BottomNav,
+} from "@/app/providers/layout/navigation/navigation";
 import { useAgentStore } from "@/app/providers/layout/store/agent.store";
 
 export const Layout = ({ children }: { children: ReactNode }) => {
@@ -8,6 +11,9 @@ export const Layout = ({ children }: { children: ReactNode }) => {
   const [isMobile, setIsMobile] = useState(() =>
     typeof window !== "undefined" ? window.innerWidth < 856 : false,
   );
+  const [isVerySmall, setIsVerySmall] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < 600 : false,
+  );
   const { fetchAgents } = useAgentStore();
 
   const sidebarOpen = isMobile ? mobileOpen : true;
@@ -19,6 +25,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
       if (!mobile) {
         setMobileOpen(false);
       }
+      setIsVerySmall(window.innerWidth < 600);
     };
 
     window.addEventListener("resize", handleResize);
@@ -55,8 +62,13 @@ export const Layout = ({ children }: { children: ReactNode }) => {
         isMobile={isMobile}
       />
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        <Navigation onToggleSidebar={toggleSidebar} isMobile={isMobile} />
+        <Navigation
+          onToggleSidebar={toggleSidebar}
+          isMobile={isMobile}
+          isVerySmall={isVerySmall}
+        />
         <div className="flex-1 overflow-auto p-4">{children}</div>
+        {isVerySmall && <BottomNav />}
       </div>
     </div>
   );