From 7d7fbd9c140ea8ae4eaf6a1ee670a3357160c83d Mon Sep 17 00:00:00 2001
From: yuding <1023798085@qq.com>
Date: Sat, 28 Feb 2026 10:09:09 +0800
Subject: [PATCH] fix(button-group): add horizontal scroll for bottom toolbar
 overflow

When container width is too small, the bottom toolbar now scrolls
horizontally. Also removes box-shadow on glass-pill sections to prevent
clipping artifacts and sets transparent background on root element.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/button-group/index.css | 35 +++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/button-group/index.css b/src/components/button-group/index.css
index 1be97b1..20adb51 100644
--- a/src/components/button-group/index.css
+++ b/src/components/button-group/index.css
@@ -5,6 +5,7 @@
     z-index: 1000;
     position: absolute;
     pointer-events: auto;
+    background: transparent;
 }
 
 .bim-btn-group-root.static {
@@ -308,6 +309,36 @@
     padding: 8px;
 }
 
+/* 底部工具栏：宽度不足时允许横向滚动 */
+.bim-btn-group-root.is-bottom-toolbar.dir-row {
+    max-width: calc(100% - 40px);
+    overflow-x: auto;
+    overflow-y: visible;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+
+.bim-btn-group-root.is-bottom-toolbar.dir-row .bim-btn-group-section {
+    flex-shrink: 0;
+}
+
+.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar {
+    height: 4px;
+}
+
+.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+}
+
+.bim-btn-group-root.is-bottom-toolbar.dir-row::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
 /* ========== type-glass-pill: 胶囊容器 + 毛玻璃 + 圆形按钮 ========== */
 /* 使用主题系统 CSS 变量，支持深色/浅色主题切换 */
 
@@ -317,7 +348,7 @@
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--bim-floating-border);
     border-radius: 9999px;
-    box-shadow: var(--bim-floating-shadow);
+    box-shadow: none;
     padding: 8px;
     gap: 10px;
 }
@@ -504,4 +535,4 @@
 
 .opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-dropdown-label {
     color: var(--bim-text-primary);
-}
\ No newline at end of file
+}