Make header and footer fixed

- Updated CSS layout to use flexbox for full-height layout
- Header and footer are now fixed (flex-shrink: 0)
- Main content area scrolls independently between header and footer
- Sidebar also scrolls independently
- Ensures header and footer are always visible

public/templates/layout.html

@@ -21,19 +21,27 @@
         body {
             display: flex;
             flex-direction: column;
-            min-height: 100vh;
+            height: 100vh;
+            overflow: hidden;
+        }
+        
+        header {
+            flex-shrink: 0;
+            z-index: 1020;
         }
         
         .main-wrapper {
             flex: 1;
             display: flex;
-            flex-direction: column;
+            overflow: hidden;
+            position: relative;
         }
         
         .content-wrapper {
             flex: 1;
             display: flex;
             overflow: hidden;
+            width: 100%;
         }
         
         .sidebar {
@@ -43,15 +51,20 @@
             overflow-y: auto;
             flex-shrink: 0;
             transition: margin-left 0.3s ease;
-        }
+            height: 100%;
-        .sidebar.collapsed {
-            margin-left: -250px;
         }
         
         .main-content {
             flex: 1;
             overflow-y: auto;
             padding: 20px;
+            height: 100%;
+        }
+        
+        footer {
+            flex-shrink: 0;
+            z-index: 1020;
+            background-color: #f8f9fa;
         }
         
         .folder-toggle {