Update Header styling to fixed position with responsive adjustments

Changed the `.header` from `sticky` to a fixed position for improved UX and ensured alignment with the sidebar. Added responsive adjustments for consistent positioning across breakpoints. Updated `.main-content` padding to prevent content overlap with the fixed header.

src/styles/components.css

@@ -148,18 +148,26 @@
 }
 
 .header {
-  position: sticky;
+  position: fixed;
   top: 0;
-  z-index: 100;
+  left: var(--sidebar-width);
+  right: 0;
+  z-index: 90; /* keep below sidebar (100) so they never overlap visually */
   background: white;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 30px;
+  min-height: var(--header-height);
+  margin-bottom: 30px; /* doesn't affect layout when fixed but keeps spacing if changed back */
   padding: 20px 30px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 }
 
+/* Ensure content is not hidden behind the fixed header */
+.main-content {
+  padding-top: calc(var(--header-height) + 40px);
+}
+
 .page-title {
   color: var(--secondary);
   font-weight: 700;
@@ -960,3 +968,21 @@ textarea {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-1px);
 }
+
+
+/* Fixed header responsive adjustments to align with sidebar breakpoints */
+@media (max-width: 1200px) {
+  .header {
+    left: 80px; /* sidebar shrinks to 80px in this breakpoint */
+  }
+}
+
+@media (max-width: 576px) {
+  .header {
+    left: 0; /* sidebar becomes overlay/off-canvas on mobile */
+  }
+  /* Keep content below the fixed header on mobile too */
+  .main-content {
+    padding-top: 110px;
+  }
+}