From 488654abc8d6a80cf1720b860992ac76c5d2ddbb Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sun, 18 May 2025 07:49:39 +0800
Subject: [PATCH] Improve card layout responsiveness and scrolling behavior

---
 static/css/components/card.css | 4 ++++
 static/css/layout.css          | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index a3977703..838383d0 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -7,9 +7,11 @@
     margin-top: var(--space-2);
     padding-top: 4px; /* 添加顶部内边距，为悬停动画提供空间 */
     padding-bottom: 4px; /* 添加底部内边距，为悬停动画提供空间 */
+    width: 100%; /* Ensure it takes full width of container */
     max-width: 1400px; /* Base container width */
     margin-left: auto;
     margin-right: auto;
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
 .lora-card {
@@ -452,6 +454,8 @@
     height: auto;
     width: 100%;
     max-width: 1400px; /* Keep the max-width from original grid */
+    box-sizing: border-box; /* Include padding in width calculation */
+    overflow-x: hidden; /* Prevent horizontal overflow */
 }
 
 /* For larger screens, allow more space for the cards */
diff --git a/static/css/layout.css b/static/css/layout.css
index 8fd0a562..8eb4ff72 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -1,10 +1,10 @@
 .page-content {
     height: calc(100vh - 48px); /* Full height minus header */
     margin-top: 48px; /* Push down below header */
-    overflow-y: auto; /* Enable scrolling here */
     width: 100%;
     position: relative;
-    overflow-y: scroll;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
+    overflow-y: auto; /* Enable vertical scrolling */
 }
 
 .container {