From 3f175a19582b8cbae1bf6281704c67e143585fed Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Sat, 1 Mar 2025 07:48:35 +0800
Subject: [PATCH] adjust auto ScrollBar styles.

---
 src/Layout.module.css                            | 3 +++
 src/components/ScrollArea.module.css             | 6 ++++--
 src/page-components/device/DeviceList.module.css | 3 +++
 src/theme.css                                    | 6 ++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/Layout.module.css b/src/Layout.module.css
index 18c1ef1..87ec1e5 100644
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -25,6 +25,9 @@
       }
     }
     section {
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
       flex: 1;
       display: flex;
       flex-direction: row;
diff --git a/src/components/ScrollArea.module.css b/src/components/ScrollArea.module.css
index 074433d..67dcf6a 100644
--- a/src/components/ScrollArea.module.css
+++ b/src/components/ScrollArea.module.css
@@ -1,9 +1,11 @@
 @layer components {
   .scroll_area {
     display: grid;
-    width: 100%;
-    height: 100%;
+    min-width: 0;
+    min-height: 0;
     overflow: hidden;
+    padding-inline-end: calc(var(--spacing) * 2);
+    padding-block-end: calc(var(--spacing) * 2);
     grid-template-columns: auto calc(var(--spacing) * 3);
     grid-template-rows: auto calc(var(--spacing) * 3);
     &.hide_thumb_y {
diff --git a/src/page-components/device/DeviceList.module.css b/src/page-components/device/DeviceList.module.css
index 5bb895e..5df0a1b 100644
--- a/src/page-components/device/DeviceList.module.css
+++ b/src/page-components/device/DeviceList.module.css
@@ -1,5 +1,8 @@
 @layer pages {
   .devices {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
     flex: 1;
     display: flex;
     flex-direction: column;
diff --git a/src/theme.css b/src/theme.css
index dfe1e99..2bf5fbe 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -19,6 +19,12 @@
     -webkit-text-size-adjust: 100%;
   }
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :where(html, body) {
     color-scheme: dark;
     width: 100vw;