From 163d5d9d7073dd135e8219c2674b8183b28da497 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Thu, 22 Jan 2026 13:51:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E5=92=8C?=
 =?UTF-8?q?=E5=8E=BB=E8=83=8C=E6=99=AF=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=AE=B0=E5=BD=95=E7=BC=A9=E7=95=A5=E5=9B=BE=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE=E9=A3=8E=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomePage.vue                        | 23 +++++++++++--------
 .../remove_background/remove_background.vue   | 23 +++++++++++--------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index fdb0aaf..36d4d07 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -2495,8 +2495,8 @@ onUnmounted(() => {
   display: flex;
   gap: 10px;
   overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0;
+  overflow-y: visible;
+  padding: 10px;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
 
@@ -2576,7 +2576,7 @@ onUnmounted(() => {
   height: 100%;
   border-radius: 8px;
   border: 2px solid #e5e7eb;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -2592,6 +2592,7 @@ onUnmounted(() => {
     height: 100%;
     object-fit: contain;
     display: block;
+    border-radius: 6px;
   }
 
   &:hover {
@@ -2600,13 +2601,13 @@ onUnmounted(() => {
 
   .history-delete-btn {
     position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 18px;
-    height: 18px;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
     border-radius: 999px;
-    border: none;
-    background: rgba(15, 23, 42, 0.6);
+    border: 2px solid white;
+    background: #ef4444;
     color: white;
     display: inline-flex;
     align-items: center;
@@ -2617,6 +2618,8 @@ onUnmounted(() => {
     cursor: pointer;
     font-size: 0;
     line-height: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 10;
 
     &::before,
     &::after {
@@ -2918,7 +2921,7 @@ onUnmounted(() => {
 
   .history-scroll-container {
     gap: 8px;
-    padding: 0 8px;
+    padding: 10px 8px;
   }
 
   .toolbar-btn {
diff --git a/src/views/tools/remove_background/remove_background.vue b/src/views/tools/remove_background/remove_background.vue
index 90649fa..1d3d31f 100644
--- a/src/views/tools/remove_background/remove_background.vue
+++ b/src/views/tools/remove_background/remove_background.vue
@@ -1403,8 +1403,8 @@ const removeHistoryItem = (index: number) => {
   display: flex;
   gap: 10px;
   overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0;
+  overflow-y: visible;
+  padding: 10px;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
 
@@ -1484,7 +1484,7 @@ const removeHistoryItem = (index: number) => {
   height: 100%;
   border-radius: 8px;
   border: 2px solid #e5e7eb;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -1500,6 +1500,7 @@ const removeHistoryItem = (index: number) => {
     height: 100%;
     object-fit: contain;
     display: block;
+    border-radius: 6px;
   }
 
   &:hover {
@@ -1508,13 +1509,13 @@ const removeHistoryItem = (index: number) => {
 
 .history-delete-btn {
     position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 18px;
-    height: 18px;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
     border-radius: 999px;
-    border: none;
-    background: rgba(15, 23, 42, 0.6);
+    border: 2px solid white;
+    background: #ef4444;
     color: white;
   display: inline-flex;
   align-items: center;
@@ -1525,6 +1526,8 @@ const removeHistoryItem = (index: number) => {
     cursor: pointer;
   font-size: 0;
   line-height: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 10;
 
   &::before,
   &::after {
@@ -1630,7 +1633,7 @@ const removeHistoryItem = (index: number) => {
 
   .history-scroll-container {
     gap: 8px;
-    padding: 0 8px;
+    padding: 10px 8px;
   }
 
   .toolbar-btn {