From 3475c91273adc9c7a45fc9c729e0a5ffed19753c Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 3 Feb 2026 13:14:12 +0000
Subject: [PATCH] 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 | 2 +-
 templates/styles.css | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/templates/brews.html b/templates/brews.html
index 1c1e552..1977b17 100644
--- a/templates/brews.html
+++ b/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)"
diff --git a/templates/styles.css b/templates/styles.css
index e81e635..1723eb8 100644
--- a/templates/styles.css
+++ b/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);