fix(brews): prevent New Brew form from overflowing on mobile

- Add width: 100% and min-width: 0 to .input-field so selects/inputs
  fill their container instead of expanding to fit content
- Add overflow-hidden to the brews form as a safety net

templates/brews.html

@@ -50,7 +50,7 @@
     <form
       method="post"
       action="/api/v1/brews"
-      class="mt-4 flex flex-col gap-4"
+      class="mt-4 flex flex-col gap-4 overflow-hidden"
       data-on:submit="$isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
       data-ref="form"
       data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $temp = 91.0, $grind = 6.0, $volume = 250, $weight = 15.0, $isSubmitting = false)"

templates/styles.css

@@ -11,6 +11,8 @@ a {
 }
 
 .input-field {
+  width: 100%;
+  min-width: 0;
   border-radius: 0.5rem;
   border: 1px solid rgba(120, 53, 15, 0.3);
   background-color: rgba(254, 243, 199, 0.85);