diff --git a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte index bf0f55e60..f031e5e92 100644 --- a/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte +++ b/apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte @@ -598,6 +598,22 @@ color: var(--status-added); } + /* Finger-sized rows and review toggles on a touch screen: the rows are + 26px tall at their padding and the toggle 20px square. The toggle grows + within its row rather than past it, so a tap just above or below a row + still reaches the neighbouring row and not this row's toggle. */ + @media (pointer: coarse) { + .tree-item { + min-height: 36px; + } + + .status-icon { + width: 32px; + height: 32px; + margin: -2px -6px; + } + } + .status-icon-static { cursor: default; } diff --git a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte index 5020dfe37..5b955dab6 100644 --- a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte +++ b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte @@ -1292,6 +1292,16 @@ display: none; } + /* The repo's panel scrolls under the home indicator: the inset moves + from the panel's padding to its scroller's, as the sidebar's. */ + .main-panel { + padding-bottom: 0; + } + + .main-panel-scroll { + padding-bottom: calc(14px + env(safe-area-inset-bottom)); + } + .panel-body:not(.detail-open) .context-item.selected { background: transparent; } diff --git a/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte b/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte index 438651233..e5a446b67 100644 --- a/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte +++ b/apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte @@ -219,6 +219,8 @@ min-height: 0; overflow-y: auto; padding: 14px; + /* The phone layout's bottom inset (SettingsPage's `.panel-pad`). */ + padding-bottom: calc(14px + var(--settings-panel-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; @@ -289,6 +291,14 @@ flex-shrink: 0; } + /* Finger-sized Copy details / Re-run on a touch screen. */ + @media (pointer: coarse) { + .header-actions :global([data-slot='button']) { + min-height: 36px; + padding-inline: 10px; + } + } + @media (max-width: 920px) { .panel-intro { flex-direction: column; diff --git a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte index 6182544b2..8fb6cc28d 100644 --- a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte +++ b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte @@ -253,6 +253,8 @@ min-height: 0; overflow-y: auto; padding: 16px; + /* The phone layout's bottom inset (SettingsPage's `.panel-pad`). */ + padding-bottom: calc(16px + var(--settings-panel-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 24px; diff --git a/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte b/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte index e01803041..251bcd4e0 100644 --- a/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte +++ b/apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte @@ -445,6 +445,8 @@ min-height: 0; overflow-y: auto; padding: 14px; + /* The phone layout's bottom inset (SettingsPage's `.panel-pad`). */ + padding-bottom: calc(14px + var(--settings-panel-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; diff --git a/apps/staged/src/lib/features/settings/ProjectStatusOptionsSetting.svelte b/apps/staged/src/lib/features/settings/ProjectStatusOptionsSetting.svelte index c45583626..349e2b809 100644 --- a/apps/staged/src/lib/features/settings/ProjectStatusOptionsSetting.svelte +++ b/apps/staged/src/lib/features/settings/ProjectStatusOptionsSetting.svelte @@ -254,6 +254,13 @@ flex-wrap: wrap; } + /* The name field keeps a readable width and the swatches wrap under it + rather than squeezing it to a few letters beside them (seven 30px + swatches left it about 48px on a 402px phone). */ + .status-option-row > :global(input) { + flex-basis: 160px; + } + .swatches { gap: 4px; } diff --git a/apps/staged/src/lib/features/settings/SettingsPage.svelte b/apps/staged/src/lib/features/settings/SettingsPage.svelte index c91794241..4ef083aae 100644 --- a/apps/staged/src/lib/features/settings/SettingsPage.svelte +++ b/apps/staged/src/lib/features/settings/SettingsPage.svelte @@ -234,11 +234,16 @@ } /* The panels are cards on the page's chrome; the bottom inset keeps them - clear of the home indicator (App.svelte's main leaves it to the panes). */ + clear of the home indicator (App.svelte's main leaves it to the panes). + On a phone (below) the card is dropped and the inset moves into the + panel body's padding through `--settings-panel-inset-bottom`, so the + body scrolls under the home indicator instead of stopping at a band of + chrome above it. */ .panel-pad { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); overflow: hidden; + --settings-panel-inset-bottom: 0px; } @media (max-width: 920px) { @@ -277,5 +282,29 @@ .nav-meta { display: none; } + + /* Full-bleed panel: the nav row above is the only chrome, the panel + runs to the screen's edges and its body takes the bottom inset. */ + .panel-pad { + padding: 0; + --settings-panel-inset-bottom: env(safe-area-inset-bottom); + } + + /* Each panel's root sets its own border and radius at (0,2,0) specificity + (`.general-settings-panel.svelte-x`), the same as a bare + `.panel-pad > :global(*)` here. That tie is decided by bundle order, + which only happens to favour this file; the extra ancestor makes this + rule win on specificity so lazy-loading a panel cannot regress it. */ + .settings-body .panel-pad > :global(*) { + border: 0; + border-radius: 0; + } + } + + /* A finger-sized tab row: the tabs are 32px tall at their padding. */ + @media (max-width: 920px) and (pointer: coarse) { + .nav-item { + min-height: 44px; + } }