fix(admin): stack settings rows vertically on phone widths

Inquiry Settings + Business Rules cards used a flex-row layout that
crushed the label column into a narrow vertical stripe at 390px ("Inquiry
/ Contact / Email" wrapping one word per line) while the input took the
right side.

Stack label + helper text above the input on phone widths; restore the
side-by-side row from sm up. Same pattern as the other detail-edit rows
that were fixed in pass-2/pass-3.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-03 17:24:20 +02:00
parent 3a9419fe10
commit 78f2f46d41

View File

@@ -241,7 +241,14 @@ export function SettingsManager() {
</CardHeader>
<CardContent className="space-y-4">
{KNOWN_SETTINGS.filter((s) => s.type === 'string').map((setting) => (
<div key={setting.key} className="flex items-center justify-between gap-4">
<div
key={setting.key}
// Stack label/description above the input on phone widths.
// The previous flex row crushed the label column into a
// narrow vertical stripe ("Inquiry / Contact / Email" wrapping
// one word per line) while the input took the rest.
className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
>
<div className="flex-1">
<Label>{setting.label}</Label>
<p className="text-xs text-muted-foreground">{setting.description}</p>
@@ -249,7 +256,7 @@ export function SettingsManager() {
<div className="flex items-center gap-2">
<Input
type="text"
className="w-64"
className="w-full sm:w-64"
value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')}
onChange={(e) =>
setValues((prev) => ({
@@ -283,7 +290,10 @@ export function SettingsManager() {
</CardHeader>
<CardContent className="space-y-4">
{KNOWN_SETTINGS.filter((s) => s.type === 'number').map((setting) => (
<div key={setting.key} className="flex items-center justify-between gap-4">
<div
key={setting.key}
className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
>
<div className="flex-1">
<Label>{setting.label}</Label>
<p className="text-xs text-muted-foreground">{setting.description}</p>
@@ -291,7 +301,7 @@ export function SettingsManager() {
<div className="flex items-center gap-2">
<Input
type="number"
className="w-24"
className="w-full sm:w-24"
value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')}
onChange={(e) =>
setValues((prev) => ({