feat: Update box-shadow for header and adjust controls styling for improved layout

static/css/components/header.css

@@ -6,7 +6,7 @@
   z-index: var(--z-header);
   height: 48px; /* Reduced height */
   width: 100%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Slightly stronger shadow */
 }
 
 .header-container {

static/css/layout.css

@@ -9,12 +9,22 @@
 
 .container {
     max-width: 1400px;
-    margin: 20px auto;
+    margin: 0 auto;
     padding: 0 15px;
     position: relative;
     z-index: var(--z-base);
 }
 
+/* Sticky controls container */
+.controls {
+    position: sticky;
+    top: -54px;
+    z-index: calc(var(--z-header) - 1);
+    background: var(--bg-color);
+    padding: var(--space-2) 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
 /* Responsive container for larger screens */
 @media (min-width: 2150px) {
     .container {
@@ -28,12 +38,6 @@
     }
 }
 
-.controls {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: var(--space-2);
-}
-
 .controls-right {
     display: flex;
     align-items: center;
@@ -379,4 +383,9 @@
         left: auto;
         right: 0; /* Align to right on mobile */
     }
+
+    /* Adjust controls padding on mobile */
+    .controls {
+        padding: 10px 0;
+    }
 }