feat(layout): improve settings form layout and enhance textarea overflow handling

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}

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
       )}
     >