moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
This commit is contained in:
Jon Seager 2026-02-03 13:14:12 +00:00
parent 35e8460219
commit 3475c91273
No known key found for this signature in database
2 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/brews.html
View file

@ -50,7 +50,7 @@
<form <form
method="post" method="post"
action="/api/v1/brews" 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-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-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)" 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)"

2
templates/styles.css
View file

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