Skip to content

fix(website): paint landing code editor scroller on iOS #188

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
zantvoort merged 1 commit into from
Jul 6, 2026
Merged

fix(website): paint landing code editor scroller on iOS #188

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
11 changes: 9 additions & 2 deletions website/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@ const CSS = `
.storm-home .sqlbtn .ico{width:13px;height:13px;opacity:.9}
.storm-home .sqlconsole{display:none;border-top:1px solid var(--border-soft);background:var(--statusbg)}
.storm-home .editor.show-sql .sqlconsole{display:block}
.storm-home #sqlpanel{margin:0;padding:14px 18px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--plain)}
/* Solid background required on the horizontal scroller: on iOS Safari an
overflow-x:auto element gets its own compositing layer, and a transparent
one paints the scrolled-in region black instead of showing the ancestor
background. Match .sqlconsole so it's visually identical. */
.storm-home #sqlpanel{margin:0;padding:14px 18px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--plain);background:var(--statusbg)}
.storm-home .statusbar .sqllabel{display:none;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.storm-home .statusbar .sqllabel .ar{color:var(--accent)}
.storm-home .editor.show-sql .statusbar #status,
Expand All @@ -89,7 +93,10 @@ const CSS = `
.storm-home .gutter{padding:22px 0;width:48px;text-align:right;color:#3b3b46;font-family:var(--mono);font-size:13px;
line-height:26px;user-select:none;border-right:1px solid var(--border-soft);flex:none}
.storm-home .gutter div{padding-right:15px}
.storm-home #code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:14px;line-height:26px;white-space:pre;overflow-x:auto;flex:1}
/* Opaque background (see #sqlpanel note): the horizontal scroller must paint
its own background or iOS renders the off-screen columns black. --panel is
the codearea gradient's top stop, so the seam is imperceptible. */
.storm-home #code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:14px;line-height:26px;white-space:pre;overflow-x:auto;flex:1;background:var(--panel)}
/* Docusaurus styles bare <pre> with a light code-block background (and rounded box) in
light color mode; neutralize it so the landing editor keeps its dark chrome regardless
of the active Docusaurus theme. */
Expand Down
Loading