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

feat(FN-3913): align settings modal header action button sizing

Browse Source 
Fixes header action button sizing in the SettingsModal to improve visual alignment across desktop and mobile, with regression tests added to prevent future regressions.

Fusion-Task-Id: FN-3913
This commit is contained in:
Fusion
2026-05-09 23:55:44 -07:00
committed by gsxdsm
parent a9ecc8ae2f
commit 35dcc09842
4 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/dashboard/app/components/SettingsModal.css
View File

@@ -4,6 +4,8 @@
/* === Settings Modal header action buttons (Star on GitHub, Help) === */
.settings-header-actions {
--settings-header-action-height: calc(var(--space-md) * 2 + var(--space-xs) / 2);
display: flex;
align-items: stretch;
gap: var(--space-xs);
@@ -14,16 +16,26 @@
/* Keep the GitHub Star and Help buttons at matching heights regardless of
their differing icon sizes (provider icon 16px vs. HelpCircle 13px). */
.settings-header-actions > .settings-github-star-btn,
.settings-header-actions > .btn {
height: calc(var(--space-md) * 2 + var(--space-xs) / 2);
.settings-header-actions > .settings-header-help-btn {
height: var(--settings-header-action-height);
box-sizing: border-box;
}
.settings-header-help-btn {
display: inline-flex;
align-items: center;
}
@media (max-width: 768px) {
/* Preserve mobile touch targets while keeping visuals compact via icon sizing/padding. */
.settings-header-actions {
--settings-header-action-height: calc(var(--space-md) * 3);
}
.settings-header-actions > .btn-icon,
.settings-header-actions > .settings-github-star-btn {
min-height: calc(var(--space-md) * 3);
.settings-header-actions > .settings-github-star-btn,
.settings-header-actions > .settings-header-help-btn {
min-height: var(--settings-header-action-height);
}
.settings-header-actions > .btn-icon {
@@ -32,7 +44,7 @@
.settings-github-star-btn__action,
.settings-github-star-btn__count {
min-height: calc(var(--space-md) * 3);
min-height: var(--settings-header-action-height);
}
}