From a33171fb207959e61da91c32d79e583d71813ea1 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Fri, 5 Sep 2025 14:55:27 +0800
Subject: [PATCH] improve layout

---
 frontend/src/index.css                       |  4 ++++
 frontend/src/pages/resource_details_page.tsx | 13 +++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 423dc77..8fa4a34 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
+@theme {
+  --breakpoint-xs: 30rem;
+}
+
 /* Pink Theme */
 @plugin "daisyui/theme" {
   name: "pink";
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 66f5134..5b42095 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -694,8 +694,8 @@ function FileTile({ file }: { file: RFile }) {
   const navigate = useNavigate();
 
   return (
-    <div className={"card shadow bg-base-100 mb-4"}>
-      <div className={"p-4 flex flex-row items-center"}>
+    <div className={"card shadow bg-base-100 mb-4 p-4"}>
+      <div className={"flex flex-row items-center"}>
         <div className={"grow"}>
           <h4 className={"font-bold break-all"}>{file.filename}</h4>
           <div className={"text-sm my-1 comment_tile"}>
@@ -727,7 +727,7 @@ function FileTile({ file }: { file: RFile }) {
               {file.is_redirect ? t("Redirect") : fileSizeToString(file.size)}
             </Badge>
             {
-              file.hash && <Badge className={"badge-soft badge-accent text-xs mr-2"} selectable={true}>
+              file.hash && <Badge className={"badge-soft badge-accent text-xs mr-2 break-all hidden sm:inline-flex"} selectable={true}>
                 <MdOutlineVerifiedUser size={16} className={"inline-block"} />
                 Md5: {file.hash}
               </Badge>
@@ -736,7 +736,7 @@ function FileTile({ file }: { file: RFile }) {
             <UpdateFileInfoDialog file={file} />
           </p>
         </div>
-        <div className={"flex flex-row items-center"}>
+        <div className={`flex-row items-center hidden xs:flex`}>
           {file.size > 10 * 1024 * 1024 ? (
             <button
               ref={buttonRef}
@@ -766,6 +766,11 @@ function FileTile({ file }: { file: RFile }) {
           )}
         </div>
       </div>
+      <div className="flex flex-row-reverse xs:hidden p-2">
+        <button className={"btn btn-primary btn-soft btn-sm"}>
+          <MdOutlineDownload size={20} />
+        </button>
+      </div>
     </div>
   );
 }