fix(desktop): global box-sizing + per-pane error boundary + Conversation defensives

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.
This commit is contained in:
vsecoder
2026-04-22 18:53:37 +03:00
parent 6b7cb1c5a9
commit 481d4d2fa8
4 changed files with 94 additions and 8 deletions

View File

@@ -9,6 +9,13 @@
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,
@@ -23,6 +30,11 @@
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>