Visitar URL original
fix(site): make the phone sticky rows full width so their tap fill reaches both edges by iamdavidhill · Pull Request #62759 · anomalyco/opencode · GitHub
Skip to content

fix(site): make the phone sticky rows full width so their tap fill reaches both edges #62759

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
adamdotdevin merged 1 commit into from
Nov 8, 2026
Merged

fix(site): make the phone sticky rows full width so their tap fill reaches both edges #62759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 17 additions & 8 deletions services/site/src/component/site/on-this-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,16 +245,24 @@
display: block;
background: var(--bg);

/* At rest the bar has no lines. Pinned (data-stuck, from ContentsMenu), a line fades in above
/* The row itself spans the screen (its padding puts the label and chevron back on the content
edge and the menu column), so its press fill does too. A fill painted past a narrower box
(border-image's outset) is clipped to that box on iOS, where the sticky bar is its own layer.
At rest the bar has no lines. Pinned (data-stuck, from ContentsMenu), a line fades in above
and below it, each across the whole screen. The top line sits on the row above the bar, where
the bar above (the top bar's hairline, or the legal tabs' divider) already draws its own and
paints over it, so there's only ever one line there. Nothing moves when they show; the bar's
background stays a hard cut. */
summary {
margin-inline: calc(-1 * var(--edge));
padding-inline: var(--edge);
}

summary::before,
summary::after {
content: "";
position: absolute;
inset-inline: calc(-1 * var(--edge));
inset-inline: 0;
height: 1px;
background: var(--border);
pointer-events: none;
Expand Down Expand Up @@ -294,8 +302,9 @@
}

/* The label and the items start at the page content's edge, at body size; the items are 44px+
rows (17px Inter at 1.4 plus 11px above and below). The current item's pipe sits on the screen's
edge; the open list spans the margins for that. */
rows (17px Inter at 1.4 plus 11px above and below). The open list spans the screen and so does
each row (its padding keeps the label on the content edge), so a row's press fill and the
current item's pipe reach the screen's edges. */
summary {
font-size: var(--body-size);
}
Expand All @@ -307,25 +316,25 @@
ul {
inset-inline-start: calc(-1 * var(--edge));
inset-inline-end: calc(-1 * var(--edge));
padding-inline: var(--edge);
padding-inline: 0;
}

/* Each row of the open list is as tall as the bar (--row-height). */
a {
--rail-pad: calc((var(--contents-height) - 1lh) / 2);
padding-inline-start: 0;
padding-inline: var(--edge);
font-size: var(--body-size);

/* The current row's bar is on the screen's edge and as tall as the whole row. */
&::before {
inset-inline-start: calc(-1 * var(--edge));
inset-inline-start: 0;
top: 0;
height: 100%;
}
}

li[data-level="3"] a {
padding-inline-start: 1rem;
padding-inline-start: calc(var(--edge) + 1rem);
}
}

Expand Down
22 changes: 16 additions & 6 deletions services/site/src/docs/styles/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,11 +212,6 @@
font-size: var(--mono-size);
}

/* The open list's current-item bar sits on the screen's edge; the labels stay on the content edge. */
[data-component="contents-menu"] a::before {
inset-inline-start: calc(-1 * var(--edge));
}

[data-component="sidebar"][data-section-nav] {
position: sticky;
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
Expand All @@ -232,14 +227,19 @@
[data-component="section-nav"] {
position: relative;

/* The row spans the screen, its padding putting the label and chevron back in place, so its
press fill reaches both edges (on-this-page.css says why a painted outset isn't enough). */
[data-slot="section-toggle"] {
position: relative;
width: calc(100% + 2 * var(--edge));
margin-inline: calc(-1 * var(--edge));
padding-inline: var(--edge);

&::before,
&::after {
content: "";
position: absolute;
inset-inline: calc(-1 * var(--edge));
inset-inline: 0;
height: 1px;
background: var(--border);
pointer-events: none;
Expand Down Expand Up @@ -285,6 +285,16 @@
overscroll-behavior: contain;
background: var(--bg);
border-bottom: 1px solid var(--border);

/* Each page is a row across the whole list, filled edge to edge while pressed. */
[data-component="docs-nav"] a {
margin-inline: calc(-1 * var(--edge));
padding-inline: var(--edge);

&:active {
background: var(--row-press);
}
}
}
}
}
Expand Down
Loading