Update package.json to allow Vite dev server to listen on all interfaces. Refactor dialog components in HomeWithDialog and receipts pages for improved layout and responsiveness. Enhance ReceiptForm styles for better user experience and accessibility, including adjustments to flex properties and overflow handling.

src/routes/HomeWithDialog.svelte

@@ -86,8 +86,8 @@
 </Dialog.Root>
 
 <Dialog.Root bind:open={receiptDialogOpen}>
-  <Dialog.Content class="max-h-[90dvh] w-[calc(100vw-2rem)] max-w-[500px] overflow-y-auto rounded-lg sm:w-full">
-    <Dialog.Header>
+  <Dialog.Content class="flex min-h-0 max-h-[90dvh] w-[calc(100vw-2rem)] max-w-[500px] flex-col overflow-hidden rounded-lg sm:w-full">
+    <Dialog.Header class="shrink-0">
       <Dialog.Title>New receipt</Dialog.Title>
       <Dialog.Description>Add a new receipt. Optionally attach an image.</Dialog.Description>
     </Dialog.Header>

src/routes/receipts/+page.svelte

@@ -118,8 +118,8 @@
 </main>
 
 <Dialog.Root bind:open={createDialogOpen}>
-  <Dialog.Content class="max-h-[90dvh] w-[calc(100vw-2rem)] max-w-[500px] overflow-y-auto rounded-lg sm:w-full">
-    <Dialog.Header>
+  <Dialog.Content class="flex min-h-0 max-h-[90dvh] w-[calc(100vw-2rem)] max-w-[500px] flex-col overflow-hidden rounded-lg sm:w-full">
+    <Dialog.Header class="shrink-0">
       <Dialog.Title>New receipt</Dialog.Title>
       <Dialog.Description>Add a new receipt. Optionally attach an image.</Dialog.Description>
     </Dialog.Header>

src/routes/receipts/ReceiptForm.svelte

@@ -63,8 +63,9 @@
       onSuccess?.();
     }
   }}
-  class="flex flex-col gap-4"
+  class="flex min-h-0 flex-1 flex-col"
 >
+  <div class="min-h-0 flex-1 overflow-y-auto space-y-4">
   <div class="space-y-2">
     <Label for="Type">Type</Label>
     <select
@@ -88,7 +89,7 @@
         accept="image/*"
         capture="environment"
         onchange={onImageChange}
-        class="absolute opacity-0 w-0 h-0 overflow-hidden"
+        class="absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none"
         tabindex="-1"
         aria-label="Scan receipt"
       />
@@ -119,8 +120,9 @@
   {#if error}
     <p class="text-destructive text-sm">{error}</p>
   {/if}
+  </div>
 
-  <div class="flex justify-end gap-2">
-    <Button type="submit">{submitLabel}</Button>
+  <div class="bg-background shrink-0 border-t border-border pt-4 -mb-6 -mx-6 px-6 pb-6 mt-4 flex justify-end gap-2">
+    <Button type="submit" class="min-h-11 min-w-[7rem]">{submitLabel}</Button>
   </div>
 </form>