💄 Fix code blocks in reference docs overflowing table width by YuriiMotov · Pull Request #15094 · fastapi/fastapi

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