From 209fc42f30077f673467ccd593c28e34ba3e86af Mon Sep 17 00:00:00 2001
From: RhenCloud <i@rhen.cloud>
Date: Sun, 9 Nov 2025 23:37:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E5=92=8C=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/main.css | 95 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 78 insertions(+), 17 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 738ad16..dbe18fa 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -52,6 +52,14 @@ h1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+h1 > div {
+    display: flex;
+    gap: 8px;
+    align-items: center;
 }
 
 /* 通用按钮样式 */
@@ -865,9 +873,7 @@ video.preview-content {
 }
 
 .actions-col {
-    width: auto;
     white-space: nowrap;
-    text-align: right;
 }
 
 .actions-col > * {
@@ -876,7 +882,6 @@ video.preview-content {
     gap: 4px;
     margin-left: 4px;
 }
-}
 
 @media (max-width: 1200px) {
     .files-table .action-text {
@@ -889,35 +894,91 @@ video.preview-content {
 
 @media (max-width: 992px) {
     .last-modified-col {
-        display: none;
+        display: none !important;
     }
     .file-name-col {
-        width: 60%;
-    }
-    .file-size-col {
-        width: 20%;
-    }
-    .actions-col {
-        width: 20%;
+        max-width: 200px;
     }
 }
 
 @media (max-width: 768px) {
     .file-size-col {
-        display: none;
+        display: none !important;
     }
     .file-name-col {
-        width: 70%;
-    }
-    .actions-col {
-        width: 30%;
+        max-width: 150px;
     }
+    
     .files-table .action-text {
         display: none;
     }
 
-    .files-table .action-link {
+    .files-table .action-link,
+    .files-table button.action-link {
         padding: 6px;
+        font-size: 1em;
+        margin-left: 2px;
+    }
+
+    .files-table td,
+    .files-table th {
+        padding: 8px 4px;
+    }
+    
+    .actions-col > * {
+        margin-left: 2px;
+        gap: 2px;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        padding: 10px;
+    }
+    
+    .container {
+        padding: 12px;
+        width: calc(100% - 20px);
+    }
+    
+    h1 {
+        margin-bottom: 20px;
+        padding-bottom: 8px;
+        justify-content: flex-start;
+    }
+    
+    h1 > div {
+        width: 100%;
+        justify-content: flex-start;
+    }
+    
+    .files-table td,
+    .files-table th {
+        padding: 6px 2px;
+        font-size: 0.9em;
+    }
+    
+    .checkbox-col {
+        width: 30px;
+    }
+    
+    .file-name-col {
+        max-width: 120px;
+        font-size: 0.85em;
+    }
+    
+    .files-table .action-link,
+    .files-table button.action-link {
+        padding: 4px;
+        font-size: 0.9em;
+        margin-left: 1px;
+    }
+    
+    .actions-col > * {
+        margin-left: 1px;
+        gap: 1px;
+    }
+}
         font-size: 1.1em;
     }