chrisf/loadout
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Make compact list readable on mobile by replacing wide bag select with compact 4-char tag pill and allowing full item text

Browse Source
This commit is contained in:
airent106 committed 2026-10-15 22:40:21 -06:00
1 parent 946a7780f6
commit be586ea386
2 files changed
+82 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/BagOverview.tsx
+13 -13
View File
@@ -95,7 +95,7 @@ export const BagOverview: React.FC<BagOverviewProps> = ({
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3">
{visibleBags.map((b) => {
const bagItems = items.filter((i) => i.bag === b.id);
const bagPacked = bagItems.filter((i) => i.packed).length;
@@ -112,43 +112,43 @@ export const BagOverview: React.FC<BagOverviewProps> = ({
sound.playClick();
onSelectBag(isSelected ? 'all' : b.id);
}}
className={`relative text-left p-3.5 border-2 border-ink transition-all flex flex-col justify-between ${
className={`relative text-left p-2.5 sm:p-3.5 border-2 border-ink transition-all flex flex-col justify-between ${
isSelected
? 'bg-canary-light shadow-card-hard border-ink translate-x-0.5 translate-y-0.5'
: 'bg-ticket-50 hover:bg-ticket-100 shadow-card-hard-sm'
}`}
>
{/* Perforation holes on card edges */}
<div className="ticket-notch-left" />
<div className="ticket-notch-right" />
<div className="ticket-notch-left hidden sm:block" />
<div className="ticket-notch-right hidden sm:block" />
<div>
{/* Top Barcode Header */}
<div className="flex items-center justify-between border-b border-ink/20 pb-2 mb-2 font-mono text-[10px]">
<span className="bg-ink text-ticket-100 px-1 py-0.5 font-bold uppercase">
<div className="flex items-center justify-between border-b border-ink/20 pb-1.5 sm:pb-2 mb-1.5 sm:mb-2 font-mono text-[10px] gap-1">
<span className="bg-ink text-ticket-100 px-1 py-0.5 font-bold uppercase shrink-0">
{b.tagCode}
</span>
<span className="text-ink-muted tracking-tight truncate max-w-[130px]">
<span className="text-ink-muted tracking-tight truncate">
{b.sub}
</span>
</div>
{/* Title & Icon */}
<div className="flex items-center justify-between gap-2 mb-1">
<div className="flex items-center gap-2 text-ink min-w-0">
<span className="text-ink shrink-0">{getBagIcon(b.iconKey)}</span>
<span className="font-display text-xl tracking-wide uppercase leading-tight truncate">
<div className="flex items-center justify-between gap-1.5 mb-1">
<div className="flex items-center gap-1.5 sm:gap-2 text-ink min-w-0">
<span className="text-ink shrink-0 hidden sm:inline">{getBagIcon(b.iconKey)}</span>
<span className="font-display text-base sm:text-xl tracking-wide uppercase leading-tight truncate">
{b.label}
</span>
</div>
{isFull && (
<CheckCircle2 size={18} className="text-stamp-green shrink-0" />
<CheckCircle2 size={16} className="text-stamp-green shrink-0" />
)}
</div>
{/* TSA / Bag Advisory Tip */}
{b.tsaTip && (
<p className="font-sans text-[11px] text-ink-muted leading-tight mb-3 line-clamp-2">
<p className="font-sans text-[11px] text-ink-muted leading-tight mb-3 line-clamp-2 hidden sm:block">
{b.tsaTip}
</p>
)}