Skip to content

💄 Fix code blocks in reference docs overflowing table width#15094

Merged
tiangolo merged 2 commits intomasterfrom
Fix-code-blocks-in-reference-docs-overflowing-table-width
Mar 23, 2026
Merged

💄 Fix code blocks in reference docs overflowing table width#15094
tiangolo merged 2 commits intomasterfrom
Fix-code-blocks-in-reference-docs-overflowing-table-width

Conversation

@YuriiMotov
Copy link
Copy Markdown
Member

@YuriiMotov YuriiMotov commented Mar 11, 2026

There is currently an issue in FastAPI Reference docs (reported in this discussion): if parameter description contains code block with long lines, it will extend the column width and part of the text will become hidden:

See: https://fastapi.tiangolo.com/reference/fastapi/#fastapi.FastAPI--example

See screenshot (before fix) image

Together with Claude Code figured out a solution that looks quite simple and reasonable.

.doc-param-details .highlight {
  overflow-x: auto;
  width: 0;
  min-width: 100%;
}

Claude Code explained it this way:

  • width: 0 - tells the table layout algorithm that .highlight needs zero width, so the <td> doesn't expand
  • min-width: 100% - once the table has calculated column widths, .highlight fills the available space
  • overflow-x: auto - adds a horizontal scrollbar when code is wider than the column

After fix, text fits the column width. If there are long lines in code block, you can use horizontal scroll bar to read them:

See (after fix): https://9541300a.fastapitiangolo.pages.dev/reference/fastapi/#fastapi.FastAPI--example

See screenshot (after fix) image

Bonus - fix displaying line numbers in API Reference docs (when run with LINENUMS=true)

Also fixed annoying bug - when you run docs live locally, it's run with LINENUMS=true. But line numbers layout is broken for API Reference docs:

See screenshot (line numbers before fix) image

By-default line numbers are added using table. And if this table is placed inside another table (table of parameters in API reference docs), it breaks styles..

There is an alternative approach as described in docs - use linenums_style: pymdownx-inline.

This way line numbers are displayed correctly:

See screenshot (line numbers after fix) image

@YuriiMotov YuriiMotov added the docs Documentation about how to use FastAPI label Mar 11, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 11, 2026

Copy link
Copy Markdown
Member

@svlandeg svlandeg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this looks great!

You'd still have to scroll for long code lines, but at least having everything else better visible is a huge improvement.

We should do this in Typer, too, will you make the PR Yurii or shall I? 🙏

Copy link
Copy Markdown
Member

@tiangolo tiangolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thank you! 🚀

@tiangolo tiangolo merged commit fd9e192 into master Mar 23, 2026
30 checks passed
@tiangolo tiangolo deleted the Fix-code-blocks-in-reference-docs-overflowing-table-width branch March 23, 2026 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Documentation about how to use FastAPI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants