YouTube Theater Mode Expander by peng-devs

/* ==UserStyle==
@name         YouTube Theater Mode Expander
@version      1.2.3
@author       peng-devs
@namespace    https://greasyfork.org/users/57176
@description  Expand theater mode to fit entire window.
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/watch"), url-prefix("https://www.youtube.com/live") {
  #page-manager {
    margin-top: 5px !important;
  }

  #masthead-container {
    top: -50px !important;
    transition: top 0.3s !important;
  }
  
  #masthead-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 70px;
  }

  #masthead-container:hover {
    top: 0 !important;
  }

  #player-theater-container, #player-wide-container, #player-full-bleed-container, #full-bleed-container {
    max-height: calc(100vh - 10px) !important;
  }
  
  /* bottom layout */
  ytd-watch-flexy[theater][live-chat-present-and-expanded] {
    > #full-bleed-container {
      flex-direction: column !important;
    }
    
    > div#columns {
      display: grid;     
      grid-template-columns: 2fr 1fr;
      grid-template-rows: auto 1fr;
      width: 100%;
      max-width: none !important;
      padding-right: 0 !important;
      padding-top: 2rem !important;
      
      /* description/comments */
      > div#primary {
        grid-column: 1;
        grid-row: 1 / 3;
      }
      /* suggestion videos */
      > div#secondary {
        grid-column: 2;
        grid-row: 2;
      }
      /* chat */
      > div#chat-container {
        grid-column: 2;
        grid-row: 1;
        width: fit-content;
        height: fit-content;
        
        > ytd-live-chat-frame#chat {
          position: relative !important;
          height: 90vh !important;
          top: 0 !important;
        }
      }
    }
  }
}