fix search section at the carplace page

apps/carplace/src/components/carplace/CarplaceSearchForm.tsx

@@ -21,6 +21,9 @@ export default function CarplaceSearchForm({ cities, copy, initial = {}, compact
   const [dropoffMode, setDropoffMode] = useState<'same' | 'different'>(initial.dropoffMode === 'different' ? 'different' : 'same')
   const [dateError, setDateError] = useState<string | null>(null)
   const today = new Date().toISOString().slice(0, 10)
+  const fieldsGridClass = compact ? 'mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4' : 'mt-4 grid gap-3 md:grid-cols-2'
+  const secondaryControlsClass = compact ? 'mt-3 flex flex-col gap-3 lg:flex-row lg:flex-wrap lg:items-end' : 'mt-3 grid gap-3'
+  const submitButtonClass = compact ? 'carplace-primary-button justify-center lg:ms-auto' : 'carplace-primary-button justify-center sm:w-max'
 
   function validateDates(event: FormEvent<HTMLFormElement>) {
     const data = new FormData(event.currentTarget)
@@ -37,7 +40,7 @@ export default function CarplaceSearchForm({ cities, copy, initial = {}, compact
   return (
     <form action={carplaceHref('/search')} method="get" onSubmit={validateDates} className={compact ? 'carplace-search carplace-search-compact' : 'carplace-search'}>
       {!compact ? <h2 className="text-xl font-black text-blue-950 dark:text-white">{copy.search.title}</h2> : null}
-      <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+      <div className={fieldsGridClass}>
         <SearchField icon={MapPin} label={copy.search.pickup}>
           <input list="carplace-cities" name="pickupLocation" defaultValue={initial.pickupLocation ?? ''} placeholder={copy.search.locationPlaceholder} required className="carplace-input" />
         </SearchField>
@@ -49,20 +52,20 @@ export default function CarplaceSearchForm({ cities, copy, initial = {}, compact
           )}
         </SearchField>
         <SearchField icon={CalendarDays} label={copy.search.pickupDate}>
-          <div className="grid grid-cols-[1fr_7rem] gap-2">
+          <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_7rem]">
             <input type="date" name="pickupDate" min={today} defaultValue={initial.pickupDate ?? ''} required className="carplace-input min-w-0" />
             <input type="time" name="pickupTime" defaultValue={initial.pickupTime ?? '10:00'} required className="carplace-input min-w-0" aria-label={copy.search.pickupTime} />
           </div>
         </SearchField>
         <SearchField icon={CalendarDays} label={copy.search.returnDate}>
-          <div className="grid grid-cols-[1fr_7rem] gap-2">
+          <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_7rem]">
             <input type="date" name="returnDate" min={today} defaultValue={initial.returnDate ?? ''} required className="carplace-input min-w-0" />
             <input type="time" name="returnTime" defaultValue={initial.returnTime ?? '10:00'} required className="carplace-input min-w-0" aria-label={copy.search.returnTime} />
           </div>
         </SearchField>
       </div>
 
-      <div className="mt-3 flex flex-col gap-3 lg:flex-row lg:items-end">
+      <div className={secondaryControlsClass}>
         <div className="flex flex-wrap gap-2" role="group" aria-label={copy.search.returnLocation}>
           <label className={`carplace-choice ${dropoffMode === 'same' ? 'carplace-choice-active' : ''}`}>
             <input type="radio" name="dropoffMode" value="same" checked={dropoffMode === 'same'} onChange={() => setDropoffMode('same')} className="sr-only" />
@@ -74,7 +77,7 @@ export default function CarplaceSearchForm({ cities, copy, initial = {}, compact
           </label>
         </div>
 
-        <div className="grid flex-1 gap-3 sm:grid-cols-2 lg:max-w-xl">
+        <div className="grid min-w-0 flex-1 gap-3 sm:grid-cols-2 lg:max-w-xl">
           <label className="grid gap-1 text-xs font-bold text-stone-600 dark:text-slate-300">
             {copy.search.age}
             <select name="driverAge" defaultValue={initial.driverAge ?? '25'} className="carplace-input">
@@ -87,7 +90,7 @@ export default function CarplaceSearchForm({ cities, copy, initial = {}, compact
           </label>
         </div>
 
-        <button type="submit" className="carplace-primary-button lg:ms-auto">
+        <button type="submit" className={submitButtonClass}>
           <Search className="h-4 w-4" />
           {copy.actions.search}
         </button>