Skip to content

fix(staged): phone Settings panels scroll under the home indicator; finger-sized controls #1056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matt2e merged 2 commits into from
Nov 12, 2026
Merged

fix(staged): phone Settings panels scroll under the home indicator; finger-sized controls #1056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e3cafc
fix(staged): phone Settings panels scroll under the home indicator; f…
matt2e Nov 11, 2026
01f9188
fix(staged): make the phone Settings card removal win on specificity,…
matt2e Nov 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions apps/staged/src/lib/features/diff/DiffFileTreeSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
10 changes: 10 additions & 0 deletions apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
10 changes: 10 additions & 0 deletions apps/staged/src/lib/features/settings/DoctorSettingsPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions apps/staged/src/lib/features/settings/KeyboardSettingsPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions apps/staged/src/lib/features/settings/ProjectStatusOptionsSetting.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
31 changes: 30 additions & 1 deletion apps/staged/src/lib/features/settings/SettingsPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Comment on lines +288 to +290

@chatgpt-codex-connector chatgpt-codex-connector Bot Nov 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Match the shared phone-layout query

On a coarse-pointer phone whose landscape viewport is wider than 920px but whose device short side is at most 500px, the rest of the app enters mobile mode through MOBILE_LAYOUT_QUERY (viewport.svelte.ts:20-21), but this rule remains gated by the enclosing @media (max-width: 920px). General, Keyboard, and Doctor therefore keep the safe-area inset on the non-scrolling .panel-pad instead of transferring it to the panel body, so the reported home-indicator scrolling fix does not apply on those supported landscape phones; include the shared query's device-width/device-height clauses here.

Useful? React with 👍 / 👎.

}

/* 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;
}
}
</style>
Loading