From 122a730a7748942ec4a0ec890aa1e9d089f97c6f Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Wed, 17 Jun 2026 21:16:21 +0800
Subject: [PATCH] feat(layout): improve settings form layout and enhance
 textarea overflow handling

---
 web/default/src/components/ui/textarea.tsx                    | 2 +-
 .../system-settings/components/settings-form-layout.tsx       | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/default/src/components/ui/textarea.tsx b/web/default/src/components/ui/textarea.tsx
index 0a27793e..c42fcb30 100644
--- a/web/default/src/components/ui/textarea.tsx
+++ b/web/default/src/components/ui/textarea.tsx
@@ -24,7 +24,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot='textarea'
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content max-h-96 min-h-16 w-full overflow-y-auto rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className
       )}
       {...props}
diff --git a/web/default/src/features/system-settings/components/settings-form-layout.tsx b/web/default/src/features/system-settings/components/settings-form-layout.tsx
index 070136b4..4d395cfa 100644
--- a/web/default/src/features/system-settings/components/settings-form-layout.tsx
+++ b/web/default/src/features/system-settings/components/settings-form-layout.tsx
@@ -52,6 +52,10 @@ export function SettingsFormGrid(props: SettingsFormGridProps) {
       data-settings-form-span='full'
       className={cn(
         'grid min-w-0 gap-x-5 gap-y-6 lg:grid-cols-2',
+        'lg:[&>[data-settings-form-span=full]]:col-span-2',
+        '[&>[data-slot=form-item]]:min-w-0',
+        'lg:[&>[data-slot=form-item]:has(textarea)]:col-span-2',
+        'lg:[&>[data-slot=form-item]:has([data-slot=switch])]:col-span-2',
         props.className
       )}
     >