YPE-2573 - Center Bible card content

[cameronapak]

Summary

• remove fixed max-width behavior from BibleCard while centering its 600px content group
• apply the same centered content treatment to VerseOfTheDay
• add Storybook wide-container coverage and align default stories with full-width usage

Ticket

https://lifechurch.atlassian.net/browse/YPE-2573

Test plan

• pnpm --filter @youversion/platform-react-ui test -- bible-card.test.tsx verse-of-the-day.test.tsx
• pnpm --filter @youversion/platform-react-ui test:integration -- bible-card.stories.tsx
• pnpm --filter @youversion/platform-react-ui test:integration -- bible-card.stories.tsx verse-of-the-day.stories.tsx

Greptile Summary

This PR replaces the fixed max-width on BibleCard and VerseOfTheDay with a new card-content CSS utility that lets the outer section fill its container while centering a 600 px content group inside. The bible-reader.css max-width is also migrated to a CSS variable with 65ch as the default, preserving the original readability constraint while enabling future overrides.

• BibleCard / VerseOfTheDay: yv:max-w-md removed from the outer <section>; yv:box-border added; all children wrapped in <div class="yv:card-content"> which applies width:100%; max-width:600px; margin-inline:auto.
• global.css: New @utility card-content implements the centering contract for both cards.
• Stories & tests: WideContainer integration stories added with getBoundingClientRect() assertions that verify the content group is ≤ 600 px wide and horizontally centered; unit tests updated to assert the new class structure.

Confidence Score: 5/5

Safe to merge — this is a pure layout refactor with no logic changes; the centering mechanism is well-tested by both unit tests and new integration stories.

All changes are CSS and component-structure only. The new card-content utility correctly applies width:100%; max-width:600px; margin-inline:auto, and box-sizing:border-box on the outer section ensures padding does not cause overflow. The bible-reader.css change preserves the 65ch readability default while adding a CSS-variable escape hatch. Integration stories validate the actual visual centering with getBoundingClientRect() assertions.

No files require special attention.

Important Files Changed

Filename	Overview
packages/ui/src/styles/global.css	Adds @Utility card-content (width:100%, max-width:600px, margin-inline:auto) — clean, reusable centering primitive.
packages/core/src/styles/bible-reader.css	Migrates hard-coded max-width:65ch to var(--yv-reader-max-width, 65ch), preserving the default readability constraint while enabling consumer overrides.
packages/ui/src/components/bible-card.tsx	Removes yv:max-w-md from outer section; wraps all children in a card-content div; adds box-border to outer section. Layout refactor is clean.
packages/ui/src/components/verse-of-the-day.tsx	Same centering treatment as BibleCard: removes yv:max-w-md and yv:gap-3 from the outer section; moves gap-3 to the new card-content inner wrapper alongside the other flex utilities.
packages/ui/src/components/bible-card.test.tsx	New unit test validates the structural class changes; includes a trivially-true assertion (not.toHaveClass('yv:max-w-[600px]')) that was never present and doesn't guard against real regressions.
packages/ui/src/components/bible-card.stories.tsx	Adds WideContainer story (900px container) with getBoundingClientRect assertions verifying ≤600px content group and symmetric whitespace; layout changed to fullscreen.
packages/ui/src/components/verse-of-the-day.stories.tsx	Same WideContainer integration story pattern as BibleCard; adds meta-level render wrapper for fullscreen layout consistency.
packages/ui/src/components/verse-of-the-day.test.tsx	Parallel unit test to bible-card.test.tsx; asserts yv:w-full, no yv:max-w-md, yv:box-border, and yv:card-content on the content group.
.changeset/pretty-bibles-sit.md	Minor bump for @youversion/platform-react-ui; description accurately reflects the card centering change.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Consumer container\n(any width)"] --> B
    B["section .yv:w-full .yv:box-border\n(fills container, padding included in width)"]
    B --> C["div .yv:card-content\nwidth:100%, max-width:600px\nmargin-inline:auto"]
    C --> D["Header row\n(reference + version picker)"]
    C --> E["AnimatedHeight\n→ BibleTextView\nmax-width: var(--yv-reader-max-width, 65ch)"]
    C --> F["Footer / Copyright"]
    style B fill:#dbeafe,stroke:#3b82f6
    style C fill:#dcfce7,stroke:#16a34a
    style E fill:#fef9c3,stroke:#ca8a04

Loading

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
packages/ui/src/components/bible-card.test.tsx:138-139
The assertion `not.toHaveClass('yv:max-w-[600px]')` checks for a class that was never present on `bibleTextView`'s parent in either the old or new code — it passes trivially and won't catch a future regression. The actual width constraint is applied via `yv:card-content` on the `contentGroup`, which is already asserted above. Consider replacing this with a positive assertion that confirms the content group's `card-content` class is the width constraint rather than anything on the `BibleTextView` parent.

```suggestion
    expect(contentGroup).toHaveClass('yv:card-content');
    // The width constraint lives on contentGroup (card-content), not on bibleTextView's parent.
    expect(bibleTextView).not.toHaveClass('yv:card-content');
```

_{Reviews (2): Last reviewed commit: "fix(ui): address card layout feedback" | Re-trigger Greptile}

[changeset-bot]

🦋 Changeset detected

Latest commit: 1627682

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Minor
vite-react	Patch
@youversion/platform-core	Minor
@youversion/platform-react-hooks	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR