<!-- Add the related story/sub-task/bug number, like Resolves#123, or
remove if NA -->
**Related issue:** NA
Image captions on articles broke onto multiple lines whenever the
caption contained an inline link. Reported on [Linux crossed 10% in
North America, and your inventory might have missed
it](https://fleetdm.com/articles/linux-crossed-10-percent-and-your-inventory-missed-it),
where the source line under the Cloudflare Radar chart rendered as:
```
Source:
Cloudflare Radar
, captured August 3, 2026.
```
## Cause
Image captions (`img + em`) were styled as a column flex container:
```less
display: flex;
align-items: center;
flex-direction: column;
```
Every child of a flex container becomes its own flex item on its own
line — including bare text nodes, which get wrapped in anonymous flex
items. That caption has three children (`"Source: "`, the `<a>`, and `",
captured August 3, 2026."`), so it stacked into three rows.
Every other image caption in `articles/` is a single plain-text run,
which is why this hasn't surfaced before. This is the first caption on
the site with an inline link.
## Fix
```less
img + em { // Image captions
position: relative;
top: -12px;
display: block;
text-align: center;
margin-bottom: 16px;
}
```
`display: block` + `text-align: center` preserves the existing centered
appearance for plain-text captions (visually identical) while letting
inline content flow normally.
## Notes for the reviewer
- **Six files, one rule.** The identical caption rule was copy-pasted
into `basic-article.less`, `basic-webinar.less`,
`basic-whitepaper.less`, `case-study.less`, `legal/privacy.less`, and
`legal/terms.less`. Only `basic-article.less` is needed to fix the
reported page; the other five carry the same defect, so all six are
updated rather than leaving the trap for the next caption with a link.
- **No markdown change.** The article source (`*Source: [Cloudflare
Radar](...), captured August 3, 2026.*`) was already correct. This is
purely a stylesheet fix.
- **Mobile overrides untouched.** The second `img + em` block in each
file (inside a media query) only adjusts `top` and `margin-bottom`, so
it needed no change.
- **Existing captions are unaffected.** All current captions are single
text runs; block + centered text renders them the same as column flex +
`align-items: center` did.
# Checklist for submitter
- [x] QA'd all new/changed functionality manually
Verified on the live article by injecting the new rule into the rendered
page: the caption went from 72px tall (three stacked lines) to 24px (one
centered line), rendering as `Source: Cloudflare Radar, captured August
3, 2026.`
I was not able to run `npm run lint` locally — `website/node_modules` is
not installed in my working copy. The change follows `.lesshintrc` (one
space after `:`, no `!important`), but CI's lint run is the authority
here.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved image caption layout across articles and legal content.
* Captions now display consistently as centered block text for better
readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Allen Houchins
033cb8843c