Center width-constrained figures and harden default image centering#180
Conversation
Width-constrained figures (e.g. `<figure style={{ maxWidth: "563px" }}>`)
were rendering flush left instead of centered. The figure rule used
`margin: 1.5em 0`, so a figure narrower than the content column kept zero
side margins; `text-align: center` only centers content inside the box,
not the box itself. Switch to `margin: 1.5em auto` so constrained figures
center on the page (full-width figures resolve auto margins to 0). This
fixes the prompt-queueing page and ~16 other pages using the same pattern.
Also harden the default image-centering rule:
- Center link-wrapped images (`<p><a><img></a></p>`) via the paragraph,
since the inline `<a>` shrink-wraps the image and defeats auto margins.
- Make the "exclude images inside tables" intent actually work with
`:not(:where(table *))` (the old `:not(table)` never matched, since an
in-cell image's parent is `<td>`, not `<table>`).
Co-Authored-By: Oz <oz-agent@warp.dev>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I'm starting a first review of this pull request. You can view the conversation on Warp. I completed the review and no human review was requested for this pull request. Comment Powered by Oz |
![oz-for-oss[bot]](https://avatars.githubusercontent.com/in/3450139?s=60&v=4){kind=small}
There was a problem hiding this comment.
Overview
This PR updates the docs stylesheet to center width-constrained figures and common image embed patterns. The figure margin change aligns with the stated goal, and this CSS-only change does not introduce security-relevant behavior.
Concerns
- The table exclusion remains incomplete for paragraph-wrapped images: the
p > imgselector and the new link-wrappedp:has(> a > img)selector still match paragraphs inside tables, so table images can still inherit centering styles despite the new guard.
Verdict
Found: 0 critical, 2 important, 0 suggestions
Request changes
Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).
Powered by Oz
Co-authored-by: oz-for-oss[bot] <277970191+oz-for-oss[bot]@users.noreply.github.com>
Co-authored-by: oz-for-oss[bot] <277970191+oz-for-oss[bot]@users.noreply.github.com>
2 participants
What
Fixes the issue where many embedded images were not center-aligned on the page — most visibly on the Prompt queueing page.
Root cause
Images in the docs are wrapped in
<figure>. The figure rule insrc/styles/custom.cssusedmargin: 1.5em 0. For figures with a constrained width (e.g.<figure style={{ maxWidth: "563px" }}>), the zero horizontal margins kept the box flush left. The existingtext-align: centeronly centers content inside the figure box, not the box itself — so a narrow figure sat on the left edge of the content column.This
maxWidthfigure pattern is used across ~17 pages (prompt queueing, Oz web app, Code Review panel, managing cloud agents, handoff, MCP, and more), so they were all affected.Changes (
src/styles/custom.css)1.5em 0to1.5em auto. Full-width figures resolve auto margins to0, so they're unaffected.<p><a><img></a></p>): add ap:has(> a > img)rule that centers via the paragraph, since the inline<a>shrink-wraps the image and defeatsmargin: autoon the image alone.:not(table) > imgnever actually excluded in-table images (an in-cell image's parent is<td>, not<table>). Replaced with:not(:where(table *)), which uses zero-specificity:where()so it doesn't fight the rest of the selector.:has()and:where()are already used elsewhere in the same stylesheet, so this stays within the existing browser-support baseline.Validation
npm run buildpasses.Conversation: https://staging.warp.dev/conversation/08538da7-499e-4217-b64e-22d6167af5be
Run: https://oz.staging.warp.dev/runs/019e9524-466c-7542-9e6e-954819f2b4b0
This PR was generated with Oz.