From 747e0007e0f1fe5cae9d9645d8b9c334f3698645 Mon Sep 17 00:00:00 2001 From: yyamashita Date: Thu, 7 May 2026 22:51:40 +0900 Subject: Fix mobile layout for iPhone-sized viewports - Stack header vertically on mobile (flex-col sm:flex-row) to prevent logo+nav overflow - Hide venue and price columns in list/row views on mobile to give title room - Shrink date/time columns on mobile (w-24 sm:w-32, w-20 sm:w-28) - Make keyword filter input full-width on mobile (w-full sm:w-52) Co-Authored-By: Claude Sonnet 4.6 --- app/components/EventListRow.tsx | 8 ++++---- app/components/FilterBar.tsx | 2 +- app/root.tsx | 2 +- app/routes/events.$id.tsx | 8 ++++---- app/routes/events._index.tsx | 6 +++--- app/routes/events.by-date.tsx | 12 ++++++------ app/routes/venues.tsx | 6 +++--- 7 files changed, 22 insertions(+), 22 deletions(-) (limited to 'app') diff --git a/app/components/EventListRow.tsx b/app/components/EventListRow.tsx index 24f5f59..30800fb 100644 --- a/app/components/EventListRow.tsx +++ b/app/components/EventListRow.tsx @@ -15,7 +15,7 @@ export default function EventListRow({ event }: Props) { className="group flex items-center gap-3 rounded-lg px-4 py-3 bg-gray-800/40 border border-gray-700/30 hover:border-indigo-500/50 hover:bg-gray-800/70 transition-all text-sm" > {/* Date */} - + {formattedDate} {timeLabel && ( {timeLabel} @@ -23,7 +23,7 @@ export default function EventListRow({ event }: Props) { {/* Venue */} - + {event.venue_name} {event.venue_area ? `（${event.venue_area}）` : ""} @@ -42,9 +42,9 @@ export default function EventListRow({ event }: Props) { {/* Price */} {event.price ? ( - ¥{event.price} + ¥{event.price} ) : ( - + )} ); diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx index 266865d..fd7be72 100644 --- a/app/components/FilterBar.tsx +++ b/app/components/FilterBar.tsx @@ -20,7 +20,7 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr type="text" defaultValue={searchParams.get("keyword") ?? ""} placeholder="アーティスト名、イベント名..." - className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-52" + className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-full sm:w-52" /> diff --git a/app/root.tsx b/app/root.tsx index dd55df0..37827e4 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -29,7 +29,7 @@ export function Layout({ children }: { children: React.ReactNode }) { - 東京ライブハウス + ライブに行くしかない diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx index cecb282..4a84308 100644 --- a/app/routes/events.$id.tsx +++ b/app/routes/events.$id.tsx @@ -15,11 +15,11 @@ export default function EventDetail() { return (
-
+
- 🎸 東京ライブハウス + 🎸 ライブに行くしかない -