diff options
Diffstat (limited to 'web/templates/partials/shopping-tab.html')
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html index e3742d9..06d2b56 100644 --- a/web/templates/partials/shopping-tab.html +++ b/web/templates/partials/shopping-tab.html @@ -32,16 +32,21 @@ hx-indicator="#shopping-add-indicator" class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5"> <input type="hidden" name="grouped" value="{{.Grouped}}"> - <div class="flex gap-2"> + <div class="flex flex-wrap gap-2"> <input type="text" name="name" placeholder="Add item..." - class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm" + class="flex-1 min-w-0 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm" required autocomplete="off"> - <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30" required> + <!-- shrink-0 + a capped width: a long store name (e.g. "Hardware Store") was + otherwise letting this <select> claim its full content width, which on a + narrow phone pushed the submit button past the right edge of the screen -- + unreachable, not just visually cramped, since the row had no wrap or shrink + to fall back on. --> + <select name="store" class="shrink-0 w-28 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30" required> {{range .Stores}} <option value="{{.Name}}">{{.Name}}</option> {{end}} </select> - <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> + <button type="submit" class="shrink-0 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> <span id="shopping-add-indicator" class="htmx-indicator">...</span> <span class="htmx-hide-indicator">Add</span> </button> |