diff options
| author | yyamashita <yyamashita@mosquit.one> | 2026-05-07 22:51:40 +0900 |
|---|---|---|
| committer | yyamashita <yyamashita@mosquit.one> | 2026-05-07 22:51:40 +0900 |
| commit | 747e0007e0f1fe5cae9d9645d8b9c334f3698645 (patch) | |
| tree | bedeb831728a707674088f652cd3c50d2750ee35 /app/components/FilterBar.tsx | |
| parent | 5c317d8a75cd398719b1e14d50ac95ecf5dafd02 (diff) | |
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>
Diffstat (limited to 'app/components/FilterBar.tsx')
| -rw-r--r-- | app/components/FilterBar.tsx | 2 |
1 files changed, 1 insertions, 1 deletions
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> |