filters sticky

index.html

@@ -32,15 +32,15 @@
             </div>
         </header>
 
+        <section id="filter-section" class="hidden">
+            <div class="filter-container" id="filter-container">
+                <!-- Activity type filters will be dynamically generated here -->
+            </div>
+        </section>
+
         <main>
             <div id="upload-status"></div>
 
-            <section id="filter-section" class="hidden">
-                <div class="filter-container" id="filter-container">
-                    <!-- Activity type filters will be dynamically generated here -->
-                </div>
-            </section>
-
             <section id="charts-section" class="hidden">
                 <div class="chart-container">
                     <h2>🗺️ Distance-based ACWR</h2>

src/style.css

@@ -26,8 +26,7 @@ body {
 
 #app {
     min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+    display: block;
 }
 
 header {
@@ -40,9 +39,6 @@ header {
     align-items: center;
     gap: 2rem;
     flex-wrap: wrap;
-    position: sticky;
-    top: 0;
-    z-index: 200;
 }
 
 header h1 {
@@ -263,7 +259,6 @@ header h1 {
 }
 
 main {
-    flex: 1;
     padding: 2rem;
     max-width: 100%;
     margin: 0 auto;
@@ -390,13 +385,12 @@ h2 {
 /* Filter Section */
 #filter-section {
     background-color: var(--card-bg);
-    border-radius: 8px;
+    border-bottom: 1px solid var(--border-color);
     padding: 1rem 2rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
     position: sticky;
-    top: 80px;
-    z-index: 100;
+    top: 0;
+    z-index: 200;
 }
 
 #filter-container {
@@ -404,6 +398,8 @@ h2 {
     align-items: center;
     flex-wrap: wrap;
     gap: 1.5rem;
+    max-width: 100%;
+    margin: 0 auto;
 }
 
 .filter-checkbox {