[mobile] Floating bottom bar for Trade/Donate/Ratings on story detail page

[realproject7]

Summary

On mobile, the story detail page shows the sidebar widgets (Price Curve, Trade, Donate, Ratings) stacked above the story content due to order-first. This pushes the actual story far down the page. Restructure for mobile so the story is the primary content and action widgets are accessed via a floating bottom bar.

Current layout

<!-- src/app/story/[storylineId]/page.tsx:137-175 -->
<div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[1fr_320px]">
  <main>...</main>
  <aside className="order-first space-y-4 lg:order-none">
    <PriceChart />
    <TradingWidget />
    <DonateWidget />
    <RatingWidget />
    <ShareToFarcaster />
  </aside>
</div>

Mobile: sidebar renders first (above story content), showing full Trade/Donate/Ratings forms inline.

Desired (mobile)

• Main area: Show story content (plots) as the primary view
• Floating bottom bar: Fixed bar at bottom with 3 buttons — Trade, Donate, Rate (similar pattern to mint.club-v2-web)
• Bottom sheet / modal: Tapping a button opens the corresponding widget (Trade → TradingWidget + PriceChart, Donate → DonateWidget, Rate → RatingWidget)
• Footer visibility: Ensure the page footer is not hidden behind the floating bar — add bottom padding to the main content area
• Desktop: Keep the current sidebar layout unchanged

Reference pattern (mint.club-v2-web)

<!-- TokenDetailPage.tsx:76-121 -->
<motion.div className="fixed bottom-0 left-0 right-0 z-[100] grid grid-cols-2 gap-2 bg-black p-4 tablet:hidden">
  <button>Buy</button>
  <button>Sell</button>
</motion.div>

And the slide-up bottom sheet:

<!-- DetailOverview.tsx:23-34 -->
<div className="fixed bottom-0 left-0 z-[110] w-full translate-y-[500px] ... tablet:relative">
  <BuySellWidget />
</div>

Use a similar approach — fixed bottom-0 button bar on mobile, hidden on lg:. Slide-up or modal for widget content. No need for Framer Motion — CSS transitions are fine.

Acceptance Criteria

• Mobile: story/plot content is the primary visible area (no sidebar widgets above it)
• Mobile: floating bottom bar with Trade, Donate, Rate buttons
• Tapping a button opens the corresponding widget (bottom sheet, modal, or slide-up)
• Footer is not hidden behind the floating bar (add pb- spacing)
• Desktop (lg:): sidebar layout unchanged
• Share to Farcaster button still accessible (can stay in main content area or floating bar)

Labels

agent/T3, plotlink, ui, mobile