skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

fix(ui): stop overflow/overlap on narrow screens (stash + listing form)

Browse source 
- Stash mobile header: the title row now wraps — the title + "Encrypted /
  Syncs everywhere" badges take a full line and the Select / view-toggle / Add
  actions drop to their own right-aligned line (they were overlapping).
- Stash list row: the stars + price line wraps, and the price can shrink, so
  the sats/fiat no longer runs under the action buttons.
- Create-listing: the Condition and Fulfilment option buttons are
  `whitespace-normal` (they inherited `whitespace-nowrap` from Button, so the
  descriptions overflowed into the neighbouring cell).
This commit is contained in:
SkateSpots 2026-10-03 21:11:42 +07:00
parent 89ec54cb23
commit 1f8f06affd
3 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
release-notes.txt
View file

@ -26,6 +26,8 @@ v1.5.11
✨ Smaller fixes
- Crew form tidied into groups (Advanced tucked away), with a "Check" button for
a custom chat coordinator and "Sasquatch · Pro" naming.
- Stash and the marketplace listing form now fit narrow phone screens — the
header, item rows and condition buttons no longer overlap.
- Marketplace reputation no longer shows a stuck "Loading…".
---

12
src/pages/CreateListingPage.tsx
View file

@ -680,17 +680,17 @@ export default function CreateListingPage() {
key={key}
type="button"
variant={condition === key ? 'default' : 'outline'}
className={`h-auto py-3 flex-col items-start ${
className={`h-auto w-full whitespace-normal py-3 flex-col items-start text-left ${
condition === key
? 'bg-orange-500 hover:bg-orange-600'
: 'border-gray-600 hover:bg-gray-800'
}`}
onClick={() => setCondition(key)}
>
<span className="font-bold">
<span className="font-bold whitespace-normal">
{emoji} {GEAR_CONDITION_KEYS[key] ? t(GEAR_CONDITION_KEYS[key]) : label}
</span>
<span className="text-xs opacity-70">{GEAR_CONDITION_DESC_KEYS[key] ? t(GEAR_CONDITION_DESC_KEYS[key]) : description}</span>
<span className="text-left text-xs opacity-70 whitespace-normal break-words leading-snug">{GEAR_CONDITION_DESC_KEYS[key] ? t(GEAR_CONDITION_DESC_KEYS[key]) : description}</span>
</Button>
))}
</div>
@ -710,15 +710,15 @@ export default function CreateListingPage() {
key={key}
type="button"
variant={fulfilment === key ? 'default' : 'outline'}
className={`h-auto py-3 flex-col items-start ${
className={`h-auto w-full whitespace-normal py-3 flex-col items-start text-left ${
fulfilment === key
? 'bg-[#00cc66] hover:bg-[#00cc66]/90 text-black'
: 'border-gray-600 hover:bg-gray-800'
}`}
onClick={() => setFulfilment(key)}
>
<span className="font-bold">{label}</span>
<span className="text-xs opacity-70">{hint}</span>
<span className="font-bold whitespace-normal">{label}</span>
<span className="text-left text-xs opacity-70 whitespace-normal break-words leading-snug">{hint}</span>
</Button>
))}
</div>

12
src/pages/StashPage.tsx
View file

@ -143,7 +143,7 @@ function StashListRow({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fal
<span className="text-[#ff6600]/80">• {{ home:'🏠',car:'🚗',skatepark:'🛹',warehouse:'🏭',storage_unit:'🔒',van:'🚐',friends:'👫',parents:'👨‍👩‍👦',wardrobe:'🚪',backpack:'🎒',sponsor:'🤝',other:'📦' }[item.storageLocation]}</span>
)}
</div>
<div className="flex items-center gap-2 mt-1">
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1">
{!isWTB && (
<div className="flex items-center gap-0.5">
{Array.from({ length: 5 }).map((_, i) => (
@ -152,7 +152,7 @@ function StashListRow({ item, onEdit, onDelete, onListOnMarketplace, isWTB = fal
</div>
)}
{(item.minPrice || item.maxPrice) && (
<span className="text-[11px] font-bold text-amber-400 flex items-center gap-0.5">
<span className="min-w-0 text-[11px] font-bold text-amber-400 flex flex-wrap items-center gap-0.5">
<Zap className="h-3 w-3" />{(item.maxPrice || item.minPrice || 0).toLocaleString()}
{usdValue && <span className="text-muted-foreground font-normal">(~${usdValue.toFixed(0)})</span>}
</span>
@ -1072,9 +1072,9 @@ export default function StashPage() {
{/* ── Sticky header ── */}
<div className="sticky top-0 z-30 bg-black/96 backdrop-blur-md border-b border-white/8">
<div className="container px-4 max-w-7xl">
{/* Title row */}
<div className="flex items-center justify-between min-h-14 py-2 gap-3">
<div className="flex items-center gap-3 min-w-0 flex-1">
{/* Title row — wraps on phones so the actions get their own line */}
<div className="flex flex-wrap items-center justify-between min-h-14 py-2 gap-x-3 gap-y-2">
<div className="flex items-center gap-3 min-w-0 w-full sm:w-auto sm:flex-1">
<div className="relative flex-shrink-0">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center shadow-[0_0_16px_rgba(255,102,0,0.35)]">
<Backpack className="h-4 w-4 text-white" />
@ -1098,7 +1098,7 @@ export default function StashPage() {
</div>
</div>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<div className="flex items-center gap-2 flex-shrink-0 ml-auto">
{/* Bulk select */}
{stats.total > 0 && (
<button