[INFRA] Use full page width

[effigies]

In many cases, our content is naturally wider than our theme (mkdocs-material) handles comfortably. Filename templates and metadata tables are frequently a bit squashed feeling.

This PR sets the max-width of the content pane to fit-content instead of 61rem. I believe this will always be the same as using the full screen width, but at least allows the possibility that a page with narrow contents would be better centered.

Relates somewhat to #1784, which addressed the impact of the narrow content frame on the entity tables.

References:

• Allow content width to grow without limiting it. squidfunk/mkdocs-material#6404
• https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Before

After

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.71%. Comparing base (b9a6673) to head (d1709f3).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2216   +/-   ##
=======================================
  Coverage   82.71%   82.71%           
=======================================
  Files          20       20           
  Lines        1608     1608           
=======================================
  Hits         1330     1330           
  Misses        278      278           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[effigies]

@thinknoack @nellh I'd be interested in your takes on this.

[thinknoack]

@thinknoack @nellh I'd be interested in your takes on this.

this makes sense and utilizes the available space. 👍

alternatives (if you want to try and see if they work for you?)

for the table

• you can make the table scrollable on the x axis while maintaining the container width of 61rem. example https://jsfiddle.net/5WsEt/

If you want to see in action. I was able to get something working here > https://bids-specification.readthedocs.io/en/latest/derivatives/common-data-types.html

you'll want to add this to see:

.md-typeset__scrollwrap {
    margin: 1em -.8rem;
    overflow-x: auto;
    touch-action: auto;
}

.md-typeset table:not([class]) {
    background-color: var(--md-default-bg-color);
    border: .05rem solid var(--md-typeset-table-color);
    border-radius: .1rem;
    display: inline-block;
    font-size: .64rem;
    overflow: auto;
    touch-action: auto;
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.md-typeset table:not([class]) td:not([align]), .md-typeset table:not([class]) th:not([align]) {
    text-align: left;
    padding: 20px 7px;
    font-size: 15px;
    border-collapse: collapse;
    min-width: 200px;
}
.md-typeset table:not([class]) td:not([align]), .md-typeset table:not([class]) th:not([align]) {
    text-align: left;
    padding: 20px 7px;
    font-size: 15px;
    border-collapse: collapse;
    min-width: 200px;
}

/* add larger min-width to the col headers you want more space for - like description*/
style="min-width: 500px;

screenshots of above css for table

for the code (<pre> or <code>)

• you can use white-space:pre-wrap; to preserve formatting (spaces and line breaks) while also enabling word wrapping, but if the visual format matters this will not work as a solution.

screenshot of pre-wrap

[julia-pfarr]

makes sense

[nellh]

I think this is a good change.