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

fix(ui): use fixed 200px card width on mobile and desktop

Browse source 
Replace viewport-relative w-[45vw] with fixed w-[200px] so brew and
bag cards maintain consistent width across breakpoints instead of
shrinking on narrow screens.
This commit is contained in:
Jon Seager 2026-02-09 19:57:36 +00:00
parent 08c1ef05cf
commit 05a40a35c2
No known key found for this signature in database
3 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/pages/home.html
View file

@ -149,7 +149,7 @@
> >
{% for _ in 0..6 %} {% for _ in 0..6 %}
<div <div
class="w-[45vw] md:w-[200px] h-[279px] shrink-0 rounded-lg border bg-surface p-4 flex flex-col" class="w-[200px] h-[279px] shrink-0 rounded-lg border bg-surface p-4 flex flex-col"
> >
<div class="h-[4.5rem]"> <div class="h-[4.5rem]">
<div class="h-4 w-3/4 rounded bg-surface-alt"></div> <div class="h-4 w-3/4 rounded bg-surface-alt"></div>
@ -220,7 +220,7 @@
> >
{% for _ in 0..6 %} {% for _ in 0..6 %}
<div <div
class="w-[45vw] md:w-[200px] h-[200px] shrink-0 rounded-lg border bg-surface p-4 flex flex-col" class="w-[200px] h-[200px] shrink-0 rounded-lg border bg-surface p-4 flex flex-col"
> >
<div class="flex-1"> <div class="flex-1">
<div class="h-4 w-3/4 rounded bg-surface-alt"></div> <div class="h-4 w-3/4 rounded bg-surface-alt"></div>

2
templates/partials/bag_card.html
View file

@ -3,7 +3,7 @@
<a <a
href="/bags/{{ bag.id }}" href="/bags/{{ bag.id }}"
id="bag-card-{{ bag.id }}" id="bag-card-{{ bag.id }}"
class="relative w-[45vw] md:w-[200px] h-[200px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col transition hover:border-accent/40" class="relative w-[200px] h-[200px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col transition hover:border-accent/40"
> >
<div class="flex-1"> <div class="flex-1">
<span class="block font-semibold text-text truncate" <span class="block font-semibold text-text truncate"

2
templates/partials/brew_card.html
View file

@ -2,7 +2,7 @@
{% macro card(brew, is_authenticated) %} {% macro card(brew, is_authenticated) %}
<a <a
href="/brews/{{ brew.id }}" href="/brews/{{ brew.id }}"
class="relative w-[45vw] md:w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col transition hover:border-accent/40" class="relative w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col transition hover:border-accent/40"
> >
<div class="h-[3.25rem] overflow-hidden"> <div class="h-[3.25rem] overflow-hidden">
<span class="block font-semibold text-text truncate" <span class="block font-semibold text-text truncate"