From a938c6b003ed090cfa0c8b312d943bc85870e5c8 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 11:34:00 +0000
Subject: [PATCH] [#303] Tidy filter bar layout on mobile with 2-column grid

Mobile: 2-column CSS grid (Writer+Genre row 1, Language+Sort row 2).
Desktop (sm+): reverts to flex-wrap row layout, unchanged.

Fixes #303

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/page.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ea0e5da5..64d7c4c5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,12 +57,10 @@ export default async function Home({
       </header>
 
       {/* Filter bar */}
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex flex-wrap items-center gap-3">
-          <WriterFilter active={writer} tab={tab} basePath="/" />
-          <GenreFilter active={genre} tab={tab} writer={writer} lang={lang} />
-          <LanguageFilter active={lang} tab={tab} writer={writer} genre={genre} />
-        </div>
+      <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3">
+        <WriterFilter active={writer} tab={tab} basePath="/" />
+        <GenreFilter active={genre} tab={tab} writer={writer} lang={lang} />
+        <LanguageFilter active={lang} tab={tab} writer={writer} genre={genre} />
         <SortDropdown active={tab} writer={writer} basePath="/" />
       </div>