root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(FN-1333): wrap btn-icon hover rules in @media (hover: hover) and add active state

Browse Source 
- Wrap .btn-icon hover styles in @media (hover: hover) to prevent touch activation on mobile/touch devices
- Add .btn-icon:active styles for proper pressed state feedback
- Fixes unintended hover state activation on touch interactions
This commit is contained in:
gsxdsm
2026-04-09 15:17:04 -07:00
parent ed275f2021
commit 13304cdfdc
1 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/dashboard/app/styles.css
View File

@@ -444,14 +444,19 @@ body {
.btn-icon svg {
stroke: currentColor;
}
.btn-icon:hover {
color: var(--text);
background: var(--border);
@media (hover: hover) {
.btn-icon:hover {
color: var(--text);
background: var(--border);
}
}
.btn-icon:focus-visible {
box-shadow: var(--focus-ring-strong);
outline: none;
}
.btn-icon:active {
opacity: 0.7;
}
.btn-icon--terminal {
position: relative;
}
@@ -492,14 +497,18 @@ body {
.btn-icon--paused {
color: var(--triage);
}
.btn-icon--paused:hover {
color: var(--triage);
@media (hover: hover) {
.btn-icon--paused:hover {
color: var(--triage);
}
}
.btn-icon--stopped {
color: var(--color-error);
}
.btn-icon--stopped:hover {
color: var(--color-error);
@media (hover: hover) {
.btn-icon--stopped:hover {
color: var(--color-error);
}
}
/* Header badge for active sessions */
@@ -15453,10 +15462,12 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
transition: all var(--transition-fast);
}
.subtask-item-actions .btn-icon:hover:not(:disabled) {
background: var(--card-hover);
border-color: var(--border);
color: var(--text);
@media (hover: hover) {
.subtask-item-actions .btn-icon:hover:not(:disabled) {
background: var(--card-hover);
border-color: var(--border);
color: var(--text);
}
}
.subtask-item-actions .btn-icon:disabled {
@@ -16904,10 +16915,12 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
transition: all var(--transition-fast);
}
.workflow-step-order-actions .btn-icon:hover:not(:disabled) {
background: var(--card-hover);
border-color: var(--border);
color: var(--text);
@media (hover: hover) {
.workflow-step-order-actions .btn-icon:hover:not(:disabled) {
background: var(--card-hover);
border-color: var(--border);
color: var(--text);
}
}
.workflow-step-order-actions .btn-icon:disabled {