Fix vertical alignment of view count and genre tag on story header

[realproject7]

Bug

On the story detail page, the view count (eye icon + number) and genre/language tags sit slightly lower than the other items (author, plot count, rating) in the metadata line. Visible on both mobile and desktop.

Root Cause

The metadata div in StoryHeader (src/app/story/[storylineId]/page.tsx ~line 254) uses:

<div className="text-muted mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs">

Missing items-center. The genre/language tags have py-0.5 padding + border which makes them taller than plain text spans. Without items-center, flex defaults to stretch/start alignment, so the text inside taller items appears lower.

Fix

Add items-center to the metadata flex container:

<div className="text-muted mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">

Files to modify

• src/app/story/[storylineId]/page.tsx — StoryHeader metadata line

Branch

task/577-story-header-alignment

Acceptance criteria

• All items in the metadata line are vertically centered
• Genre/language tags align with author, plot count, view count, and rating
• Verified on both mobile and desktop