[Bug] Desktop: stats boxes and CTA not next to Moleskine cover

[realproject7]

Problem

PR #817 used sm:pl-[176px] to indent the stats grid and button, but they're still in a separate section BELOW the cover+info flex row — not actually inside the right column next to the cover.

Screenshot shows: title/writer/genre next to cover, then large empty space, then stats grid spanning full width below.

Root Cause

The stats grid and AddPlotButton are placed OUTSIDE the flex-row container (cover + info). They need to be INSIDE the flex-1 info column div so they naturally flow in the right column next to the cover.

Solution

Move the stats grid (grid-cols-2 sm:grid-cols-3) and AddPlotButton INSIDE the info panel div (min-w-0 flex-1) — the same div that holds title, rating, writer, genre. Remove the sm:pl-[176px] hack.

<div class="flex flex-row items-start gap-4">
  <!-- Moleskine cover -->
  <div class="shrink-0 w-[100px] sm:w-[160px]">...</div>
  
  <!-- Info column — everything here sits next to the cover -->
  <div class="min-w-0 flex-1">
    <h1>Title</h1>
    <div>Rating + Views</div>
    <div>Writer / Genre rows</div>
    
    <!-- Stats grid — NOW inside the right column -->
    <div class="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
      ...6 stat cells...
    </div>
    
    <!-- CTA button — also in the right column -->
    <AddPlotButton ... />
  </div>
</div>

No pl-[176px] needed — flexbox handles the alignment naturally.

Acceptance Criteria

• Desktop: stats grid sits next to the cover in the right column (not below)
• Desktop: CTA button in the right column (not full-width below)
• Mobile: same layout works (cover + info + stats all flow in the right column)
• Remove sm:pl-[176px] hack
• No visual regression on mobile

Branch

task/<issue>-stats-next-to-cover