letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/admin/settings/settings-manager.tsx
View File

@@ -241,7 +241,14 @@ export function SettingsManager() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{KNOWN_SETTINGS.filter((s) => s.type === 'string').map((setting) => ( {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"> <div className="flex-1">
<Label>{setting.label}</Label> <Label>{setting.label}</Label>
<p className="text-xs text-muted-foreground">{setting.description}</p> <p className="text-xs text-muted-foreground">{setting.description}</p>
@@ -249,7 +256,7 @@ export function SettingsManager() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Input <Input
type="text" type="text"
className="w-64" className="w-full sm:w-64"
value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')} value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')}
onChange={(e) => onChange={(e) =>
setValues((prev) => ({ setValues((prev) => ({
@@ -283,7 +290,10 @@ export function SettingsManager() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{KNOWN_SETTINGS.filter((s) => s.type === 'number').map((setting) => ( {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"> <div className="flex-1">
<Label>{setting.label}</Label> <Label>{setting.label}</Label>
<p className="text-xs text-muted-foreground">{setting.description}</p> <p className="text-xs text-muted-foreground">{setting.description}</p>
@@ -291,7 +301,7 @@ export function SettingsManager() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Input <Input
type="number" type="number"
className="w-24" className="w-full sm:w-24"
value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')} value={String(getEffectiveValue(setting.key, setting.defaultValue) ?? '')}
onChange={(e) => onChange={(e) =>
setValues((prev) => ({ setValues((prev) => ({