WIP: Mobile optimizations - responsive layout with bottom nav

web/src/components/ResponsiveLayout.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+import { BottomNavBar } from "./BottomNavBar";
+import { Sidebar } from "./Sidebar";
+
+export function ResponsiveLayout({ children }: { children: React.ReactNode }) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Check screen size on mount and resize
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkScreenSize();
+
+    // Add event listener
+    window.addEventListener("resize", checkScreenSize);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  return isMobile ? (
+    <>
+      <div
+        style={{
+          height: "calc(100vh - 60px)", // Account for bottom nav height
+          overflow: "auto",
+        }}
+      >
+        {children}
+      </div>
+      <BottomNavBar />
+    </>
+  ) : (
+    <Sidebar>{children}</Sidebar>
+  );
+}