Actually fix the Subscribe button overflow (previous fix was inert)

The prior commit's .subscribe-form .dx-input selector never matched
anything: dioxus's #[css_module] macro content-hashes Input's class at
build time (e.g. rendered as class="dx-input-83f82cbc", confirmed by
inspecting the live DOM), so a selector on the unhashed "dx-input"
name was dead CSS from the start — hence the overflow persisting
across rebuilds and hard refreshes.

Select on the raw <input> tag within .subscribe-form instead, which
doesn't depend on the module's per-build hash. Verified against the
running dev server (not just visually): the Subscribe button now
renders flush with the form's own right edge (both at x=247) instead
of spilling to x=314, well inside the sidebar's x=256 boundary.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PqTJmazHBQK878vjQ4JnnF
This commit is contained in:
Austin Schaefer 2026-09-03 19:07:51 +02:00
parent 86863d809d
commit 44e2fb4d4e

View file

@ -11,7 +11,10 @@ body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; height: 10
.topics { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.error { color: #b00020; }
.subscribe-form { display: flex; gap: 0.5rem; margin: 1rem 0; min-width: 0; }
.subscribe-form .dx-input { flex: 1; min-width: 0; }
/* Target the raw tag, not the component's own class: dioxus's #[css_module]
content-hashes Input's class per build (e.g. "dx-input-83f82cbc"), so a
selector on the unhashed name never matches anything. */
.subscribe-form input { flex: 1 1 0; min-width: 0; }
.subscribe-status { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.subscribe-status.success { color: #1a7f37; }
.subscribe-status.error { color: #b00020; }