jacobh2
2ae65a5a9f
Build Kvitt images / build (push) Failing after 1h14m5s
web/ is the browser client's scaffold: Vite 8, React 19, TypeScript 5.9 strict, React Router 7 (basename /app, every fixed route with a lazy placeholder page), TanStack Query 5 (refetch on focus and every 60 s), openapi-typescript types generated from contracts/openapi.yaml with openapi-fetch. Reads go through GET /sync (no REST reads exist for the ledger, SPEC §7): useLedger() pulls from cursor 0 and then incrementally, restarting on a new epoch or cursor_ahead. Login pairs the browser as "Web · <browser>" with an invite code (E-3); every call sends the SPEC §14.3.1 headers, a 401 signs out. kvitt-domain's split, balances, allocation and settlement rules are ported to web/src/lib and pass every case of contracts/test-vectors. Design tokens from design-spec §2 in tokens.css (light-dark()), Material Symbols Rounded (Apache-2.0) as generated inline SVG, sv/en catalogs generated from docs/ux/strings.csv plus web-strings.csv. Gate: cd web && npm run check. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B
52 lines
1.0 KiB
CSS
52 lines
1.0 KiB
CSS
.region {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: var(--s6);
|
|
transform: translateX(-50%);
|
|
z-index: 200;
|
|
width: min(560px, calc(100% - 2 * var(--gutter)));
|
|
pointer-events: none;
|
|
}
|
|
@media (max-width: 719.98px) {
|
|
.region {
|
|
bottom: calc(var(--nav-height) + var(--s3));
|
|
}
|
|
}
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s2);
|
|
min-height: 48px;
|
|
padding: var(--s1) var(--s1) var(--s1) var(--s4);
|
|
border-radius: var(--radius-small);
|
|
background: var(--inverse-surface);
|
|
color: var(--inverse-on-surface);
|
|
box-shadow: var(--elevation-3);
|
|
}
|
|
.message {
|
|
flex: 1;
|
|
font: var(--type-body-medium);
|
|
letter-spacing: var(--tracking-body-medium);
|
|
padding: var(--s2) 0;
|
|
}
|
|
.action,
|
|
.close {
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-full);
|
|
min-height: 40px;
|
|
}
|
|
.action {
|
|
padding: 0 var(--s3);
|
|
color: var(--inverse-primary);
|
|
font: var(--type-label-large);
|
|
}
|
|
.close {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 40px;
|
|
color: var(--inverse-on-surface);
|
|
}
|