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>
This commit is contained in:
yuding
2026-02-28 10:09:09 +08:00
parent 2395dff81e
commit 7d7fbd9c14

View File

@@ -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;
}