UI updates

src/components/layout/MainLayout.tsx

@@ -45,6 +45,13 @@ function AppWithProviders({ page: initialPage }: AppProps) {
   const [currentPage, setCurrentPage] = useState<AppProps['page']>(initialPage);
   const [navigationKey, setNavigationKey] = useState(0);
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    // Check if we're on medium screens (768px - 1280px)
+    if (typeof window !== 'undefined') {
+      return window.innerWidth >= 768 && window.innerWidth < 1280;
+    }
+    return false;
+  });
 
   useRepoSync({
     userId: user?.id,
@@ -83,6 +90,23 @@ function AppWithProviders({ page: initialPage }: AppProps) {
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
 
+  // Handle window resize to auto-collapse sidebar on medium screens
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      // Auto-collapse on medium screens (768px - 1280px)
+      if (width >= 768 && width < 1280) {
+        setSidebarCollapsed(true);
+      } else if (width >= 1280) {
+        // Expand on large screens
+        setSidebarCollapsed(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   // Show loading state only during initial auth/config loading
   const isInitialLoading = authLoading || (configLoading && !user);
 
@@ -113,14 +137,21 @@ function AppWithProviders({ page: initialPage }: AppProps) {
           currentPage={currentPage} 
           onNavigate={handleNavigation} 
           onMenuClick={() => setSidebarOpen(!sidebarOpen)}
+          onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+          isSidebarCollapsed={sidebarCollapsed}
+          isSidebarOpen={sidebarOpen}
         />
         <div className="flex flex-1 relative">
           <Sidebar 
             onNavigate={handleNavigation} 
             isOpen={sidebarOpen}
+            isCollapsed={sidebarCollapsed}
             onClose={() => setSidebarOpen(false)}
+            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
           />
-          <section className="flex-1 p-4 sm:p-6 overflow-y-auto h-[calc(100dvh-4.55rem)] w-full lg:w-[calc(100%-16rem)]">
+          <section className={`flex-1 p-4 sm:p-6 overflow-y-auto h-[calc(100dvh-4.55rem)] w-full transition-all duration-200 ${
+            sidebarCollapsed ? 'md:w-[calc(100%-5rem)] xl:w-[calc(100%-16rem)]' : 'md:w-[calc(100%-16rem)]'
+          }`}>
             {currentPage === "dashboard" && <Dashboard />}
             {currentPage === "repositories" && <Repository />}
             {currentPage === "organizations" && <Organization />}