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 removes the fixed max-w-md constraint from BibleCard and VerseOfTheDay, allowing both components to fill their container at full width while keeping content readable by centering it at a 600px max-width via a new card-content Tailwind utility. The [data-slot='yv-bible-renderer'] CSS now accepts a --yv-reader-max-width custom property (defaulting to 65ch) so standalone BibleTextView consumers retain their readability constraint.

• global.css: Adds @utility card-content (width: 100%; max-width: 600px; margin-inline: auto) and both components wrap their inner content in a div with this class.
• bible-reader.css: Converts the hard-coded max-width: 65ch to var(--yv-reader-max-width, 65ch), preserving the default while enabling per-context overrides.
• Stories / tests: Default stories switch to fullscreen layout; new WideContainer integration stories with play functions verify centering and width constraints in a 900 px container.

Confidence Score: 5/5

Safe to merge — changes are purely additive layout adjustments with no logic mutations.

The change replaces a fixed max-w-md cap with a centered 600px content wrapper, adds box-border to the outer section, and converts one hard-coded CSS max-width to a CSS custom property that defaults to the same value. All three layers — CSS utility, component JSX, and tests — are consistent with each other. The --yv-reader-max-width fallback preserves existing behaviour for standalone BibleTextView consumers. Integration stories exercise real browser geometry through play functions. No data-fetching paths, auth logic, or public API shapes are touched.

No files require special attention.

Important Files Changed

Filename	Overview
packages/ui/src/styles/global.css	Adds the new card-content Tailwind utility that centers content at 600 px; definition is clean and well-scoped.
packages/core/src/styles/bible-reader.css	Converts hard-coded max-width: 65ch to a CSS custom property with the same default, preserving backward compatibility for standalone BibleTextView consumers.
packages/ui/src/components/bible-card.tsx	Removes max-w-md, adds box-border, and wraps all card content in the new card-content div; refactor is clean with no functional regressions.
packages/ui/src/components/verse-of-the-day.tsx	Mirrors the BibleCard treatment — drops max-w-md and gap-3 from the section, wraps inner content with card-content flex flex-col gap-3; gap behaviour is preserved.
packages/ui/src/components/bible-card.stories.tsx	Adds a WideContainer integration story with a play function that verifies centering and width constraints in a 900 px viewport; assertions are sensible.
packages/ui/src/components/verse-of-the-day.stories.tsx	Parallel WideContainer story added for VerseOfTheDay; same geometry assertions as the BibleCard story.
packages/ui/src/components/bible-card.test.tsx	New unit test verifies class-level structural changes; approach is appropriate for JSDOM.
packages/ui/src/components/verse-of-the-day.test.tsx	New unit test mirrors the BibleCard test structure and correctly asserts class-based layout changes.
.changeset/pretty-bibles-sit.md	Minor-bump changeset; bump level is appropriate for a public layout behaviour change.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph Before
        S1["section\n(max-w-md, p-6)"]
        S1 --> H1["Header div"]
        S1 --> A1["AnimatedHeight\n(BibleTextView)"]
        S1 --> F1["Footer / Attribution"]
    end

    subgraph After
        S2["section\n(w-full, box-border, p-6)"]
        S2 --> CC["div.card-content\n(max-w: 600px, mx: auto)"]
        CC --> H2["Header div"]
        CC --> A2["AnimatedHeight\n(BibleTextView — max-w: 65ch)"]
        CC --> F2["Footer / Attribution"]
    end

    style CC fill:#e0f2fe,stroke:#0284c7

Loading

_{Reviews (3): Last reviewed commit: "Merge origin/main into codex/ype-2573-ca..." | Re-trigger Greptile}

[changeset-bot]

🦋 Changeset detected

Latest commit: a382db7

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