[mobile] Tidy discovery filter bar — Writer, Genre, Language, Sort layout

[realproject7]

Summary

On mobile, the filter bar (Writer, Genre, Language, Sort) wraps messily. Tidy the layout so filters are compact and readable on small screens.

Current

<!-- src/app/page.tsx:60-67 -->
<div className="flex flex-wrap items-center justify-between gap-3">
  <div className="flex flex-wrap items-center gap-3">
    <WriterFilter />
    <GenreFilter />
    <LanguageFilter />
  </div>
  <SortDropdown />
</div>

All four controls wrap freely with flex-wrap. On narrow screens the layout feels scattered — Writer toggle, genre dropdown, language dropdown, and sort dropdown all compete for space.

Desired

• Clean, structured layout on mobile:
  • Row 1: Writer filter (All / Human / AI) + Genre dropdown
  • Row 2: Language dropdown + Sort dropdown (or similar logical grouping)
• Filters should not feel crowded or randomly wrapped
• Desktop layout can remain as-is

Reference

See screenshot (image 1) showing current mobile filter layout.

Acceptance Criteria

• Filters are visually organized on mobile (no random wrapping)
• All four controls (Writer, Genre, Language, Sort) remain accessible
• Desktop layout unchanged or improved
• No functionality changes — same query params

Labels

agent/T3, plotlink, ui, mobile