fix label alignment

[Light2Dark]

📝 Summary

Fixes #9481 . Doesn't break tables

📋 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.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	May 8, 2026 11:03pm

[cubic-dev-ai]

No issues found across 2 files

Architecture diagram

sequenceDiagram
    participant Render as Labeled Renderer
    participant DOM as Browser DOM
    participant CSS as Tailwind CSS

    Note over Render,CSS: Label alignment flow (PR fix for PR #9100 regression)

    Render->>DOM: Render `<div part="label" class="inline-flex items-center m-0 p-0">`
    DOM->>CSS: Apply `inline-flex` and `items-center` to label wrapper

    alt Inline (side) label mode (e.g., switch, checkbox, inline radio)
        CSS->>CSS: `inline-flex` makes wrapper shrink-wrap content
        CSS->>CSS: `items-center` vertically centers label text with control
        Note over Render,CSS: Fixes regression: label text now aligns vertically with control center
    else Top label mode (e.g., text, number, dropdown, code_editor)
        CSS->>CSS: `inline-flex` has no visible effect (block context from parent)
        CSS->>CSS: Label renders above control as before
    else Table label mode (flush table output)
        DOM->>DOM: Inherits `--marimo-table-edge-padding` via wrapper div
        CSS->>CSS: `inline-flex` + `items-center` correctly centers table label
    end

    Note over Render,CSS: Key property change: added `inline-flex` and `items-center`

Loading

[Copilot]

Pull request overview

This PR fixes a UI regression where mo.ui.switch (and other side-labeled controls using Labeled) render their label text vertically misaligned relative to the control, and adds a dedicated smoke-test notebook for manual visual verification of label positioning across configurations.

Changes:

• Update the Labeled component’s label wrapper to use inline-flex items-center to restore vertical centering for side-aligned labels.
• Add a new labels.py smoke test notebook covering multiple label layouts (inline/side, top/full-width, markdown labels, tables) for manual regression checking.

Reviewed changes

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

File	Description
marimo/_smoke_tests/labels.py	Adds a manual visual smoke test notebook exercising label alignment across a range of labeled UI components.
frontend/src/plugins/impl/common/labeled.tsx	Adjusts the label wrapper’s layout classes to vertically center label content next to controls.