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

fix(dashboard): full-height settings modal on mobile + consistent section spacing

Browse Source 
Pin the settings modal to 100dvh on mobile (overlay padding/inset reset, min-height enforced) and align section heading gutters with form-group items so each settings page has consistent horizontal spacing around headers and items.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-04 11:03:28 -07:00
parent 7ae22a7ee5
commit 8483a5ffae
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/settings-modal-mobile-full-height.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Make the settings modal fill the viewport on mobile and align section headings with form-group gutters for consistent spacing across each settings page.

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

@@ -92,7 +92,8 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.modal-overlay.settings-modal-overlay, .modal-overlay.settings-modal-overlay,
.modal-overlay:has(.settings-modal) { .modal-overlay:has(.settings-modal) {
padding-top: 0; padding: 0;
inset: 0;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
} }
@@ -102,16 +103,18 @@
min-width: 0; min-width: 0;
max-width: 100vw; max-width: 100vw;
height: 100dvh; height: 100dvh;
min-height: 0; min-height: 100dvh;
max-height: 100dvh; max-height: 100dvh;
margin: 0; margin: 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
resize: none; resize: none;
flex: 1 1 auto;
} }
.modal.settings-modal[style*="--keyboard-overlap"] { .modal.settings-modal[style*="--keyboard-overlap"] {
height: var(--vv-height, 100dvh); height: var(--vv-height, 100dvh);
min-height: var(--vv-height, 100dvh);
max-height: var(--vv-height, 100dvh); max-height: var(--vv-height, 100dvh);
transform: translateY(var(--vv-offset-top, 0px)); transform: translateY(var(--vv-offset-top, 0px));
will-change: transform; will-change: transform;
@@ -366,16 +369,22 @@
.settings-section-heading { .settings-section-heading {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: var(--space-lg) 0 var(--space-md); padding: var(--space-lg) var(--space-xl) var(--space-md);
margin: 0; margin: 0 0 var(--space-md);
color: var(--text); color: var(--text);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
margin-bottom: var(--space-xs); }
/* First heading inside the section drops top padding to remove a redundant
gap stacked on top of the settings-content container's own top padding. */
.settings-content > .settings-section-heading:first-child,
.settings-modal-section > .settings-section-heading:first-child {
padding-top: var(--space-md);
} }
/* Spacing modifier for settings-section-heading that need extra top margin */ /* Spacing modifier for settings-section-heading that need extra top margin */
.settings-section-heading--spaced { .settings-section-heading--spaced {
margin-top: var(--space-xl); margin-top: var(--space-lg);
} }
.settings-section-description { .settings-section-description {
@@ -1485,8 +1494,8 @@
} }
.settings-section-heading { .settings-section-heading {
padding: var(--space-lg) 0 var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md);
margin: 0; margin: 0 0 var(--space-md);
} }
.settings-plugins-subsection-toggle { .settings-plugins-subsection-toggle {