Fix layout

static/css/components/modal.css

@@ -2,10 +2,10 @@
 .modal {
     display: none;
     position: fixed;
-    top: 0;
+    top: 48px; /* Start below the header */
     left: 0;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 48px); /* Adjust height to exclude header */
     background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
     z-index: var(--z-modal);
     overflow: hidden; /* 改为 hidden，防止双滚动条 */
@@ -24,7 +24,7 @@ body.modal-open {
     max-width: 800px;
     height: auto;
     max-height: 90vh;
-    margin: 2rem auto;
+    margin: 1rem auto; /* Reduce top margin from 5rem to 1rem */
     background: var(--lora-surface);
     border-radius: var(--border-radius-base);
     padding: var(--space-3);

static/css/components/search-filter.css

@@ -144,10 +144,9 @@
 
 /* Filter Panel Styles */
 .filter-panel {
-    position: absolute;
-    top: 140px; /* Adjust to be closer to the filter button */
+    position: fixed;
     right: 20px;
-    width: 300px;
+    width: 320px;
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-base);
@@ -312,7 +311,7 @@
         width: calc(100% - 40px);
         left: 20px;
         right: 20px;
-        top: 140px;
+        top: 160px; /* Adjusted for mobile layout */
     }
 }
 
@@ -351,10 +350,9 @@
 
 /* Search Options Panel */
 .search-options-panel {
-    position: absolute;
-    top: 140px;
-    right: 65px; /* Position it closer to the search options button */
-    width: 280px; /* Slightly wider to accommodate tags better */
+    position: fixed;
+    right: 20px;
+    width: 280px;
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-base);
@@ -507,4 +505,15 @@ input:checked + .slider:before {
 
 .slider.round:before {
     border-radius: 50%;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .search-options-panel,
+    .filter-panel {
+        width: calc(100% - 40px);
+        left: 20px;
+        right: 20px;
+        top: 160px; /* Adjusted for mobile layout */
+    }
 }

static/css/layout.css

@@ -4,6 +4,7 @@
     overflow-y: auto; /* Enable scrolling here */
     width: 100%;
     position: relative;
+    overflow-y: scroll;
 }
 
 .container {