From c893dd7095451bfc2efbc006faaa1d9684334617 Mon Sep 17 00:00:00 2001
From: chenkailing <632104866@qq.com>
Date: Sat, 11 Apr 2026 21:12:06 +0800
Subject: [PATCH] fix: keep preview parameters on one row

---
 .../main/resources/static/css/main-pages.css  | 37 +++++++++----------
 server/src/main/resources/web/main/index.ftl  |  2 +-
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/server/src/main/resources/static/css/main-pages.css b/server/src/main/resources/static/css/main-pages.css
index f44653b9..691d775c 100644
--- a/server/src/main/resources/static/css/main-pages.css
+++ b/server/src/main/resources/static/css/main-pages.css
@@ -547,28 +547,29 @@ a:focus {
 }
 
 .preview-options {
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: stretch;
     gap: 12px;
     margin-bottom: 14px;
-    overflow-x: auto;
-    padding-bottom: 4px;
+    overflow: visible;
+    padding-bottom: 0;
 }
 
 .preview-grid {
-    display: flex;
-    flex-wrap: nowrap;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 12px;
     margin-bottom: 0;
     overflow: visible;
     padding-bottom: 0;
-    flex: 1 1 auto;
-    min-width: 620px;
+    min-width: 0;
+    width: 100%;
 }
 
 .preview-grid .form-control {
-    flex: 1 1 0;
-    min-width: 150px;
+    width: 100%;
+    min-width: 0;
 }
 
 .preview-switches {
@@ -578,7 +579,7 @@ a:focus {
     margin-bottom: 0;
     overflow: visible;
     padding-bottom: 0;
-    flex: 0 0 auto;
+    width: 100%;
 }
 
 .preview-switches label {
@@ -1264,6 +1265,10 @@ a:focus {
     .archive-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+
+    .preview-grid {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    }
 }
 
 @media (max-width: 768px) {
@@ -1304,16 +1309,8 @@ a:focus {
         grid-template-columns: 1fr;
     }
 
-    .preview-grid {
-        flex-wrap: wrap;
-        min-width: 0;
-        overflow-x: visible;
-    }
-
     .preview-options {
-        display: block;
-        overflow-x: visible;
-        padding-bottom: 0;
+        grid-template-columns: 1fr;
     }
 
     .preview-url {
diff --git a/server/src/main/resources/web/main/index.ftl b/server/src/main/resources/web/main/index.ftl
index 71e3eb49..088ca4e3 100644
--- a/server/src/main/resources/web/main/index.ftl
+++ b/server/src/main/resources/web/main/index.ftl
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
-    <link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-3"/>
+    <link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-5"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.form.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>