feat(slides): add deck-level content alignment control

[Light2Dark]

📝 Summary

Closes #9856

Slides currently center each slide's content vertically, with no way to opt out. This adds a deck-level Content alignment control (top / center / bottom) in the slides config sidebar.

• The vertical centering was hardcoded (margin: auto 20px on the slide content), so content couldn't be top-aligned to match the regular cell view (Aligning content in slides view #9856).
• New verticalAlign field on the deck config drives the slide content's vertical margins: top pins to the top like the cell view, center keeps today's behavior, bottom pins to the bottom.
• Defaults to center so existing decks are visually unchanged on upgrade.
• Scoped to the deck (not per-slide) to keep the surface small; the schema is a looseObject over an opaque backend blob, so this is frontend-only and forward/backward compatible.

📋 Pre-Review Checklist

• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• Any AI generated code has been reviewed line-by-line by the human PR author, who stands by it.
• Video or media evidence is provided for any visual changes (optional).

✅ Merge Checklist

• I have read the contributor guidelines.
• Documentation has been updated where applicable, including docstrings for API changes.
• Tests have been added for the changes made.

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Jul 14, 2026 4:57pm

[Copilot]

Pull request overview

Adds a deck-level “Content alignment” control to the slides configuration so authors can choose whether slide content is vertically aligned to the top, center (current behavior), or bottom—addressing #9856 while keeping existing decks visually unchanged by default.

Changes:

• Introduces a deck.contentAlign field (validated via Zod) with allowed values top | center | bottom.
• Adds a “Content alignment” select control to the slides config sidebar, defaulting to center.
• Applies the chosen alignment in the Reveal-based slides renderer by adjusting the slide content container’s vertical margins, and adds validator/(de)serialize round-trip tests.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
frontend/src/components/slides/slide-form.tsx	Adds default + UI control for deck-level content alignment (contentAlign).
frontend/src/components/slides/reveal-component.tsx	Applies deck.contentAlign by resolving a content container margin style used across slide rendering paths.
frontend/src/components/editor/renderers/slides-layout/types.ts	Extends deck config schema/types to include contentAlign with strict enum validation.
frontend/src/components/editor/renderers/slides-layout/tests/plugin.test.ts	Adds validation and backwards-compat/(de)serialization coverage for deck.contentAlign.

[cubic-dev-ai]

No issues found across 4 files

Architecture diagram

sequenceDiagram
    participant User as User
    participant Sidebar as Slides Config Sidebar
    participant Layout as Layout State (store)
    participant Validate as SlidesLayoutPlugin
    participant Subslide as SubslideView (render)
    participant StyleFn as resolveSlideContentStyle()
    participant DOM as Slide Content <div>

    Note over User,DOM: NEW: Deck-level content alignment control

    Note over Validate,Layout: On deck load (unchanged)
    Layout->>Validate: validate(layout.deck)
    Validate-->>Layout: DeckConfig with optional contentAlign
    alt contentAlign missing
        Layout->>Layout: Use default "center"
    end

    Note over User,Sidebar: User changes alignment

    User->>Sidebar: Select "Top" in dropdown
    Sidebar->>Layout: setLayout({...layout, deck: { contentAlign: "top" }})
    Layout-->>Sidebar: State updated (re-render)
    Sidebar->>Subslide: Pass layout.deck.contentAlign

    Note over Subslide,DOM: Render slide with new alignment

    Subslide->>StyleFn: resolveSlideContentStyle("top")
    alt contentAlign = "top"
        StyleFn-->>Subslide: { margin: "0 20px auto" }
    else contentAlign = "center" (default)
        StyleFn-->>Subslide: { margin: "auto 20px" }
    else contentAlign = "bottom"
        StyleFn-->>Subslide: { margin: "auto 20px 0" }
    end
    Subslide->>DOM: Apply margin style to .mo-slide-content
    DOM-->>Subslide: Content rendered with new vertical position

    Note over Sidebar,Layout: Invalid value (e.g. "middle") rejected by schema
    User->>Sidebar: Select invalid value
    Sidebar->>Validate: (implicit) schema enforces enum
    alt Value invalid
        Sidebar-->>User: Dropdown value rejected / no state change
    end

Loading

_{Re-trigger cubic}

[mscolnick]

Worth swapping to "align content" to match css?

[Light2Dark]

changed to vertical-align, which matches css more.

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.15-dev12