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/FilterBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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"
         />
       </div>
 
-- 
cgit v1.2.3

