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>

4 files changed, 16 insertions, 16 deletions

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 (
     <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="hover:text-white transition-colors">会場一覧</Link>
         </nav>
@@ -35,7 +35,7 @@ export default function EventDetail() {
             <img
               src={event.image_url}
               alt={event.title}
-              className="w-full max-h-72 object-cover rounded-xl mb-6"
+              className="w-full object-contain rounded-xl mb-6"
             />
           )}
 
diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx
index 7e6ca5d..f2e1737 100644
--- a/app/routes/events._index.tsx
+++ b/app/routes/events._index.tsx
@@ -47,11 +47,11 @@ export default function EventsIndex() {
 
   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="/events/by-date" className="hover:text-white transition-colors">日付別</Link>
           <Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
diff --git a/app/routes/events.by-date.tsx b/app/routes/events.by-date.tsx
index fadb737..9a59073 100644
--- a/app/routes/events.by-date.tsx
+++ b/app/routes/events.by-date.tsx
@@ -64,11 +64,11 @@ export default function EventsByDate() {
 
   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="/events/by-date" className="text-white">日付別</Link>
           <Link to="/venues" className="hover:text-white transition-colors">会場一覧</Link>
@@ -162,7 +162,7 @@ function VenueEventRow({ event }: { event: Event }) {
       className="group flex items-start gap-4 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"
     >
       {/* Time */}
-      <span className="w-28 shrink-0 text-xs text-gray-400 tabular-nums pt-0.5">
+      <span className="w-20 sm:w-28 shrink-0 text-xs text-gray-400 tabular-nums pt-0.5">
         {timeLabel || <span className="text-gray-600">時間未定</span>}
       </span>
 
@@ -180,11 +180,11 @@ function VenueEventRow({ event }: { event: Event }) {
 
       {/* Price */}
       {event.price ? (
-        <span className="shrink-0 text-xs text-emerald-400 pt-0.5">
+        <span className="hidden sm:block shrink-0 text-xs text-emerald-400 pt-0.5">
           ¥{event.price}
         </span>
       ) : (
-        <span className="shrink-0 w-16" />
+        <span className="hidden sm:block shrink-0 w-16" />
       )}
     </Link>
   );
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>