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/routes/venues.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/routes/venues.tsx')

diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx
index fca90dd..b027707 100644
--- a/app/routes/venues.tsx
+++ b/app/routes/venues.tsx
@@ -14,11 +14,11 @@ export default function Venues() {
 
   return (
     <div className="min-h-screen bg-gray-950 text-gray-100">
-      <header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
+      <header className="border-b border-gray-800 px-4 sm:px-6 py-3 sm:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
         <Link to="/" className="text-xl font-bold tracking-tight text-white">
-          🎸 東京ライブハウス
+          🎸 ライブに行くしかない
         </Link>
-        <nav className="flex gap-6 text-sm text-gray-400">
+        <nav className="flex gap-4 sm:gap-6 text-sm text-gray-400">
           <Link to="/events" className="hover:text-white transition-colors">イベント</Link>
           <Link to="/venues" className="text-white font-medium">会場一覧</Link>
         </nav>
-- 
cgit v1.2.3