From 747e0007e0f1fe5cae9d9645d8b9c334f3698645 Mon Sep 17 00:00:00 2001
From: yyamashita <yyamashita@mosquit.one>
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 <noreply@anthropic.com>
---
 app/components/EventListRow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/components/EventListRow.tsx')

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 */}
-      <span className="w-32 shrink-0 text-xs text-gray-400 tabular-nums">
+      <span className="w-24 sm:w-32 shrink-0 text-xs text-gray-400 tabular-nums">
         {formattedDate}
         {timeLabel && (
           <span className="block text-gray-600 text-[11px]">{timeLabel}</span>
@@ -23,7 +23,7 @@ export default function EventListRow({ event }: Props) {
       </span>
 
       {/* Venue */}
-      <span className="w-28 shrink-0 truncate rounded-full bg-gray-700/60 px-2 py-0.5 text-xs text-gray-300">
+      <span className="hidden sm:inline-flex w-28 shrink-0 truncate rounded-full bg-gray-700/60 px-2 py-0.5 text-xs text-gray-300">
         {event.venue_name}
         {event.venue_area ? `（${event.venue_area}）` : ""}
       </span>
@@ -42,9 +42,9 @@ export default function EventListRow({ event }: Props) {
 
       {/* Price */}
       {event.price ? (
-        <span className="shrink-0 text-xs text-emerald-400">¥{event.price}</span>
+        <span className="hidden sm:block shrink-0 text-xs text-emerald-400">¥{event.price}</span>
       ) : (
-        <span className="shrink-0 w-16" />
+        <span className="hidden sm:block shrink-0 w-16" />
       )}
     </Link>
   );
-- 
cgit v1.2.3