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:
@@ -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] */
|
||||
|
||||
Reference in New Issue
Block a user