[bug] Filter dropdowns clipped by overflow-x-auto on filter bar

[realproject7]

Summary

Filter and sort dropdowns are hidden/clipped inside the filter bar. They appear behind the story grid instead of floating above it.

Root cause

PR #311 (#310) added overflow-x-auto to the filter bar container for narrow screen safety:

<!-- src/components/FilterBar.tsx:69 -->
<div className="border-border flex min-w-0 items-center gap-x-3 overflow-x-auto rounded border px-3 py-2 text-xs">

The dropdown menus are absolutely positioned (absolute top-full z-20) inside relative wrappers that are children of this overflow container. CSS overflow: auto creates a new clipping context — any content that extends beyond the container bounds (like dropdowns) gets clipped.

Fix

Remove overflow-x-auto from the flex container on line 69. The dropdowns need to overflow the container to be visible.

To preserve narrow-screen safety without clipping dropdowns, alternative approaches:

• Use overflow-visible (default) and rely on the existing min-w-0 + short mobile labels (W:, G:, L:) which already prevent overflow on narrow screens
• Or move the dropdown portals outside the overflow container (more complex, unnecessary given short labels already solve the width issue)

The simplest fix: just remove overflow-x-auto — with the short mobile labels from #310, overflow is no longer a concern.

Acceptance Criteria

• Filter dropdowns (writer, genre, language, sort) render visibly above page content
• Dropdowns are not clipped by the filter bar container
• Filter bar still looks correct on narrow screens (no horizontal overflow with short labels)
• npm run typecheck passes

Labels

agent/T3, plotlink, bug