Widescreen View (With Mockup)

[Drew-Chase]

A widescreen mode for the crate page, currently the page content is just a small sliver of my screen. I've mocked-up a version.

Recording.2025-02-07.102629.mp4

<div id="page-expand-button">
    <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" style="width: 1.5rem;height: 1.5rem;">
        <path fill="currentColor" d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16m578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16M342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16M904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32"></path>
    </svg>
</div>

#page-expand-button {
      position: fixed;
      top: 1rem;
      right: 1rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color .2s;
  }

  #page-expand-button:hover {
      background-color: rgba(0, 0, 0, 0.1);
  }

  main>div {
      width: auto !important;
      max-width: 960px;
      transition: max-width .2s;
  }

  main>div[expanded="true"] {
      max-width: 100%;
  }

document.getElementById('page-expand-button').addEventListener('click', () => {
    var main = document.querySelector('main>div');
    main.setAttribute('expanded', main.getAttribute('expanded') === 'true' ? 'false' : 'true');
});

[Turbo87]

see #1559 😉

[Drew-Chase]

That's similar to what I was looking for, however that only expands the viewport a little-bit based on the screens width. My idea would allow for the existing design to remain, but allowing for the view to dynamically expand to fill the total width of your screen.