luxfi/wallet
1
0
Fork 0
mirror of https://github.com/luxfi/wallet.git synced 2026-07-27 03:37:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): stop mobile horizontal overflow on the wallet landing page

Browse Source 
At 390px the top bar was a single non-wrapping flex row whose min-content
width (~470px) forced the single-column app grid — and thus the whole
document — to 478px, pushing the account/connect control off-screen and
clipping the CTA card. Two changes:

- index.html: add the app's one document-level reset (box-sizing:border-box
  + zero html/body margin). The missing UA body margin reset was adding the
  extra 8px (478 vs 470). No overflow-x:hidden — it would break the sticky
  header.
- AppShell.tsx: let the header wrap (flex-wrap) so the chain+account group
  drops to a second row instead of widening the document; grid header row
  becomes minmax(56px,auto) so the wrapped row isn't clipped; groups get
  min-width:0 so they can shrink.

Verified headless at 390x844: document.scrollWidth 478 -> 390, zero
elements past the viewport, connect control + CTA fully on-screen.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>
This commit is contained in:
zeekay
2026-07-18 20:48:55 -07:00
co-authored by Hanzo Dev
parent db275f7487
commit 5dd2b16022
2 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/index.html
+18
View File
@@ -9,6 +9,24 @@
<link rel="apple-touch-icon" href="/logo.svg" />
<title>Lux Wallet</title>
<meta name="description" content="Self-custodial wallet for the Lux Network" />
<style>
/* Base reset — the SPA styles every element inline, so this is the
one place a document-level reset lives. Kills the UA <body> 8px
margin (which pushed the layout 8px wide) and makes padded,
width:100% boxes (the CTA card + buttons) stay inside their parent
on narrow screens. No overflow-x:hidden here — it would break the
sticky header's position:sticky. */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="root"></div>
apps/web/src/components/AppShell.tsx
+20 -4
View File
@@ -53,7 +53,9 @@ export function AppShell(): React.JSX.Element {
style={{
minHeight: "100vh",
display: "grid",
gridTemplateRows: "56px 1fr",
// minmax so the header row grows when it wraps on narrow screens
// instead of clipping the wrapped second line.
gridTemplateRows: "minmax(56px, auto) 1fr",
background: "var(--surface1, #000)",
color: "var(--neutral1, #fff)",
}}
@@ -63,7 +65,12 @@ export function AppShell(): React.JSX.Element {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "0 16px",
// Wrap on narrow screens: the brand group keeps row 1, the
// chain+account group drops to row 2 instead of forcing the
// whole document wider than the viewport (mobile overflow fix).
flexWrap: "wrap",
gap: "8px 12px",
padding: "8px 16px",
borderBottom: "1px solid var(--surface3, #222)",
background: "var(--surface1, #000)",
position: "sticky",
@@ -71,7 +78,7 @@ export function AppShell(): React.JSX.Element {
zIndex: 10,
}}
>
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
<button
type="button"
aria-label="Toggle navigation"
@@ -92,7 +99,16 @@ export function AppShell(): React.JSX.Element {
) : null}
<strong style={{ fontSize: 16 }}>{brand.walletName || "Lux Wallet"}</strong>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<div
style={{
display: "flex",
alignItems: "center",
gap: 12,
minWidth: 0,
flexWrap: "wrap",
justifyContent: "flex-end",
}}
>
<ChainSwitcher />
<span
style={{