481d4d2fa8
Two bugs reported after v2.2.0:
1. Input fields and textareas overflowed their container — typing in
Settings / SendModal / NewContactModal would push the border past
the card edge because the renderer's default box-sizing was
content-box and `width: 100%` + padding pushed widths past parents.
Added `*, *::before, *::after { box-sizing: border-box; }` to
index.html. Removes the need for per-element `boxSizing: 'border-box'`
(the existing sprinkles stay for clarity but are now redundant).
2. App went blank when opening a chat — any throw inside Conversation
propagated up through Shell and wiped the whole window, with no way
to navigate out. Added PaneBoundary, a React error boundary scoped
to one Shell pane, keyed on `${section}-(list|detail)` so it resets
when the user switches section. Now a crash shows an inline error
card with message + stack + Retry, while NavBar + StatusBar stay
usable.
Also hardened Conversation against edge cases that were candidates
for the original crash:
* `name` always falls back to shortAddr(address) if all other
branches produce an empty string.
* first letter used for the avatar is computed once, guarded
against empty input with a `?` fallback.
* Header name + short-address line get whiteSpace/overflow/ellipsis
so very long contacts no longer escape the 32px wide sub-column
the way they did for the reporter.
Fonts normalised in the global CSS too — inputs/textareas/buttons now
inherit `font-family` instead of the browser default, which was
breaking the visual rhythm in the Settings cards.
45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- CSP is applied at HTTP-response level from main.ts via
|
|
session.webRequest — not in a <meta> here. Vite's dev server
|
|
needs unsafe-eval for HMR, which breaks a strict meta-CSP at
|
|
module-load time; setting CSP from main lets us flip
|
|
dev vs. production rules cleanly. -->
|
|
<title>DChain</title>
|
|
<style>
|
|
/* Global box-sizing — every padding+border counts toward the declared
|
|
width, not on top of it. Without this, `<input style="width:100%">`
|
|
inside a padded flex container visibly overflows its parent on
|
|
every modal / Settings card. Applied universally because almost
|
|
every per-element override was forgetting it anyway. */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html, body, #root { margin: 0; padding: 0; height: 100%; background: #000; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
/* Let text fields + readable text be selectable despite global disable. */
|
|
input, textarea, [contenteditable], .selectable {
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|
|
/* Form elements should never paint their own background/border over
|
|
our dark theme. Each component still sets its own explicit colours. */
|
|
input, textarea, button {
|
|
font-family: inherit;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|