opensource/mateclaw
2
0
Fork 0
mirror of https://gitee.com/mateos/mateclaw.git synced 2026-09-13 03:13:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(ui): stop tool-tier toggle button text overflow by raising .tier-btn selector specificity

Browse Source 
The tier toggle buttons carry both .row-btn and .tier-btn (equal 0,1,0 specificity), so the later-declared .row-btn width:30px/display:flex overrode .tier-btn's width:auto/line-height and clipped the label. Scope the rule to .row-btn.tier-btn (0,2,0) so the text-button properties win.
This commit is contained in:
MIST 2026-07-04 12:12:25 +08:00 committed by GitHub
parent 53a12ee18d
commit d9c999abc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
mateclaw-ui/src/views/Tools.vue
View File

@ -274,8 +274,11 @@ async function toggleTool(tool: Tool) {
.tools-section-title { font-size: 15px; font-weight: 700; color: var(--mc-text-primary); }
.tools-section-count { font-size: 12px; font-weight: 600; color: var(--mc-text-secondary); background: var(--mc-bg-muted); padding: 2px 8px; border-radius: 10px; }
.tools-section-hint { font-size: 12px; color: var(--mc-text-tertiary); }
.tier-btn { width: auto; height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; line-height: 30px; white-space: nowrap; color: var(--mc-text-secondary); }
.tier-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); border-color: var(--mc-primary); }
/* 复合选择器 .row-btn.tier-btn (specificity 0,2,0) 必须高于 .row-btn (0,1,0),
否则 .row-btn 后置的 width:30px / display:flex 等会反向覆盖文字按钮的
width:auto / line-height,导致 "→ 扩展" / "← 核心" 文字溢出 30px 矮盒。 */
.row-btn.tier-btn { width: auto; height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; line-height: 30px; white-space: nowrap; color: var(--mc-text-secondary); }
.row-btn.tier-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); border-color: var(--mc-primary); }
.tier-locked { display: inline-flex; align-items: center; padding: 0 8px; font-size: 11px; color: var(--mc-text-tertiary); cursor: help; }
.btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); }
.btn-primary:hover { background: var(--mc-primary-hover); }