mirror of
https://github.com/luxfi/wallet.git
synced 2026-07-27 03:37:41 +00:00
zeekayandHanzo Dev
5dd2b16022
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>
36 lines
1.2 KiB
HTML
36 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="alternate icon" href="/favicon.ico" />
|
|
<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>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|