hashicorp fixation with 1344px

[infowolfe]

@hashishaw @hellobontempo
(sorry to tag y'all by name, but you both touched the file referenced below)

Could you please explain why Hashicorp sometimes refuses to acknowledge that people have monitors that have resolutions >=1409 px in width?

vault/ui/app/styles/components/cluster-banners.scss

Line 8 in 25f038a

max-width: 1344px;

Describe the bug
Like most people who use computers in 2024 I have a monitor that is >=1409px in width, and yet some sites across Hashicorp (such as the terraform registry) have a max-width:1344px set.

To Reproduce
Steps to reproduce the behavior:

1. Have a 1080p or 4K monitor (with hidpi off)
2. Maximize your window
3. Open something that uses .cluster-banners-wrapper css style or another container where max-width is set.
4. Note that whatever's in this container has a large amount of empty/unused screen space to either side of it, defeating the purpose of having a large monitor.

Expected behavior
max-width (at least on terraform registry's documentation) should either not be set, or set to a value that allows full utilization of the given viewport.

Environment:
any web browser

Additional context
I found this little gem because I had to use horizontal scrollbars when trying to review code on registry.terraform.io and this happens to be the only reference to the infernal 1344px I could find in hashicorp's public code on github.

tl;dr: please stop artificially limiting the max-width org-wide, thanks!

Offending code from terraform registry (which doesn't have a github project that I can file bugs against):

@media screen and (max-width: 1407px) {
    .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen),.section-browse-list .is-fullhd.browse-columns:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width:1344px
    }
}
@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen),.section-browse-list .browse-columns:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width:1344px
    }
}

[Monkeychip]

@infowolfe thank you for the issue. Would you mind including a screenshot to help show the visual effect? You're description is great, but it will help support the problem with a visual.

[infowolfe]

@Monkeychip of course!

Here's some screenshots showing this issue in various orientations. Using hard constraints/max-width on the center section of every doc-related thing I've seen from hashicorp makes it pretty unergonomic (especially when trying to read code blocks).

Wide 3840x1080:
25% corner 1920x1080:
Fullscreen ~3840x2160:
vertical half 1920x2160:
vertical half 1920x2160: .

And finally what it looks like if I do a nasty monkeypatch to the stylesheet:

@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen),.section-browse-list .browse-columns:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 3840px;
    }
}

My main concern is that this seems to be an institutional thing across all of Hashicorp's UI/UX teams. It would be really cool if this could be escalated/raised internally so every UI/UX team understands that they need to test on monitors with either hidpi on at 100% and the pages in full screen or on monitors larger than a postage stamp.