Improve form layout on narrow screens

Date inputs no longer overflow on small devices. Selected country
fills available width. Period filter uses short labels (1Y, 5Y)
below the sm breakpoint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jdamcd

src/components/AddVisitForm.tsx

@@ -44,7 +44,7 @@ export function AddVisitForm({ onAdd, onCancel }: AddVisitFormProps) {
           </label>
           {selectedCountry ? (
             <div className="flex items-center gap-2">
-              <span className="px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
+              <span className="flex-1 px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
                 {selectedCountry.name}
               </span>
               <button
@@ -113,7 +113,7 @@ export function AddVisitForm({ onAdd, onCancel }: AddVisitFormProps) {
             type="date"
             value={startDate}
             onChange={(e) => setStartDate(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full min-w-0 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
             required
           />
         </div>
@@ -126,7 +126,7 @@ export function AddVisitForm({ onAdd, onCancel }: AddVisitFormProps) {
             value={endDate}
             onChange={(e) => setEndDate(e.target.value)}
             min={startDate}
-            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full min-w-0 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
       </div>

src/components/DateRangeFilter.tsx

@@ -13,11 +13,11 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
   const now = useMemo(() => new Date(), []);
   const [showCustom, setShowCustom] = useState(false);
 
-  const presets: { value: PresetOption; label: string }[] = [
-    { value: '1y', label: '1 year' },
-    { value: '5y', label: '5 years' },
-    { value: 'all', label: 'All' },
-    { value: 'custom', label: 'Custom' },
+  const presets: { value: PresetOption; label: string; shortLabel: string }[] = [
+    { value: '1y', label: '1 year', shortLabel: '1Y' },
+    { value: '5y', label: '5 years', shortLabel: '5Y' },
+    { value: 'all', label: 'All', shortLabel: 'All' },
+    { value: 'custom', label: 'Custom', shortLabel: 'Custom' },
   ];
 
   const currentPreset = useMemo((): PresetOption => {
@@ -83,7 +83,7 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
         <span className="w-12 shrink-0 text-sm text-gray-500 dark:text-gray-400">Period</span>
 
         <div className="flex flex-wrap gap-2">
-          {presets.map(({ value, label }) => (
+          {presets.map(({ value, label, shortLabel }) => (
             <button
               key={value}
               onClick={() => handlePresetChange(value)}
@@ -93,7 +93,8 @@ export function DateRangeFilter({ dateRange, onChange }: DateRangeFilterProps) {
                   : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500'
               }`}
             >
-              {label}
+              <span className="sm:hidden">{shortLabel}</span>
+              <span className="hidden sm:inline">{label}</span>
             </button>
           ))}
         </div>