Body width scaling issues

[eric-schneider]

This issue was first noticed on List collection names (adoc source). The Python, TS, Java, and curl tabs are all the same width, but when you switch to CLI, the tabs get narrower (in fact, the entire body element gets narrower).

After some investigation, there appears to be two separate issues with the UI:

Issue 1: The width of the page body element isn’t fixed, even at wide viewports (see 1st screenshot)

• The body has a minimum width and a maximum width.
• The body width scales up in response to the widest child element (see heading in 2nd screenshot).

Issue 2: Some elements default to the max width of their parent element, some do not

• Admonitions automatically use the max width of their parent (see 3rd screenshot).
• Tabsets, code blocks, paragraph text, tables (and probably more) do not scale to max width.

Conclusion

When you combine these two issues, you can run into a situation like what’s happening when you click the CLI tab on List collection names:

1. None of the content outside of the tabsets is using max width.
2. Every language, except CLI, has at least one tab at max width.
3. When you click on any of the CLI tabs, then all of a sudden there’s nothing on the page that’s at max width anymore, and thus the body width suddenly shrinks.

If you were to put an admonition or a long paragraph in any of those CLI tabs, the issue would disappear. For example:

= Title

== Heading 1

[tabs,sync-group-id=languages]
======
Python::
+
--
test
--

TypeScript::
+
--
[NOTE]
====
Admonition has max width.
====
--

Java::
+
--
test
--

curl::
+
test

CLI::
+
test
======

== Heading 2

Paragraph