diff options
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/EventListRow.tsx | 8 | ||||
| -rw-r--r-- | app/components/FilterBar.tsx | 2 |
2 files changed, 5 insertions, 5 deletions
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> ); 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> |