diff options
Diffstat (limited to 'app/routes/events.by-date.tsx')
| -rw-r--r-- | app/routes/events.by-date.tsx | 12 |
1 files changed, 6 insertions, 6 deletions
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> ); |