feat(FN-4281): complete Step 1 — mobile settings header reflow

Fusion-Task-Id: FN-4281
Fusion-Task-Lineage: fe64ad7e-e0ef-4eda-8023-c080db34d5a9
This commit is contained in:
Fusion
2026-05-13 08:28:53 -07:00
committed by gsxdsm
parent d5be0dbe65
commit 924732ee36

View File

@@ -27,9 +27,32 @@
}
@media (max-width: 768px) {
/* FN-4281: let Settings header content reflow so close button stays visible on narrow phones. */
.settings-modal .modal-header {
flex-wrap: wrap;
align-items: flex-start;
row-gap: var(--space-sm);
column-gap: var(--space-sm);
}
.settings-modal-heading {
flex: 1 1 auto;
min-width: 0;
}
.settings-update-check {
flex-wrap: wrap;
row-gap: var(--space-xs);
}
/* Preserve mobile touch targets while keeping visuals compact via icon sizing/padding. */
.settings-header-actions {
--settings-header-action-height: calc(var(--space-md) * 3);
flex: 1 1 100%;
justify-content: flex-start;
margin-left: 0;
margin-right: 0;
}
.settings-header-actions > .btn-icon,
@@ -46,6 +69,14 @@
.settings-github-star-btn__count {
min-height: var(--settings-header-action-height);
}
.settings-modal .modal-close {
flex: 0 0 auto;
align-self: flex-start;
margin-left: auto;
min-width: calc(var(--space-md) * 3);
min-height: calc(var(--space-md) * 3);
}
}
/* GitHub star button — split-pill layout: [Star half | Count half] */