fix: 收紧形态图库移动端筛选区

移动端将搜索与类型、状态与图标操作分别保持在两行，并允许状态选择框优先收缩。
2026-09-08 14:48:25 +08:00
parent 63e53b03f4
commit aa83f7196d
3 changed files with 35 additions and 36 deletions
@@ -966,26 +966,25 @@ async function showStaleForms() {
 }
@container (max-width: 460px) {
    .form-image-filters {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        display: flex;
+        flex-wrap: wrap;
        gap: 10px;
    }
-    /* 移动端让搜索独占首行，两个筛选项等宽，图标操作独占末行，避免控件互相挤压。 */
+    /* 移动端固定为两行：搜索给类型选择让位，状态可收缩以优先保留四个完整操作按钮。 */
    .search-filter {
-        grid-column: 1 / -1;
-        grid-row: 1;
+        flex: 1 1 calc(100% - 130px);
+        min-width: 0;
    }
    .module-filter {
-        grid-column: 1;
-        grid-row: 2;
+        flex: 0 0 120px;
    }
    .status-filter {
-        grid-column: 2;
-        grid-row: 2;
+        flex: 0 1 110px;
+        min-width: 90px;
    }
    .form-image-display-controls {
-        grid-column: 1 / -1;
-        grid-row: 3;
-        width: 100%;
+        flex: 1 0 152px;
+        width: auto;
        justify-content: flex-end;
    }
    .filter-result-count {