feat(dashboard): improve layout overflow handling and responsive design

Author: x0sina

dashboard/src/components/common/string-array-popover-input.tsx

@@ -124,7 +124,7 @@ export function StringArrayPopoverInput({
           dir="ltr"
           variant="outline"
           role="combobox"
-          className={cn('h-auto w-full min-w-0 justify-between p-2 text-left', className)}
+          className={cn('h-auto w-full min-w-0 overflow-hidden justify-between p-2 text-left', className)}
           title={displayValue || placeholder}
           disabled={disabled}
         >
@@ -193,7 +193,7 @@ export function StringArrayPopoverInput({
               </div>
               <div className="min-h-0 max-h-[min(50dvh,14rem)] space-y-1 overflow-y-auto overscroll-contain pr-1 touch-pan-y">
                 {items.map((item, index) => (
-                  <div key={`${item}-${index}`} className="group flex min-w-0 items-center gap-2 rounded-md border p-2 transition-colors hover:bg-accent/50">
+                  <div key={`${item}-${index}`} className="group flex min-w-0 max-w-full items-center gap-2 rounded-md border p-2 transition-colors hover:bg-accent/50">
                     {editingIndex === index ? (
                       <Input
                         value={editingValue}

dashboard/src/features/hosts/dialogs/host-modal.tsx

@@ -198,7 +198,7 @@ const ArrayInput = memo<ArrayInputProps>(({ field, placeholder, label, infoConte
   const isMobile = useIsMobile()
 
   return (
-    <FormItem>
+    <FormItem className="min-w-0">
       <div className="flex items-center gap-2">
         <FormLabel>{label}</FormLabel>
         {infoContent && (
@@ -807,8 +807,8 @@ const HostModal: React.FC<HostModalProps> = ({ isDialogOpen, onOpenChange, onSub
                 )}
               />
 
-              <div className="!mb-4 flex justify-between gap-4">
-                <div className="flex-[2]">
+              <div className="!mb-4 grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,2fr)_minmax(7rem,1fr)]">
+                <div className="min-w-0">
                   <FormField
                     control={form.control}
                     name="address"
@@ -819,7 +819,7 @@ const HostModal: React.FC<HostModalProps> = ({ isDialogOpen, onOpenChange, onSub
                     }}
                   />
                 </div>
-                <div className="flex-1">
+                <div className="min-w-0">
                   <FormField
                     control={form.control}
                     name="port"