The theme not handling responsive

[kenso312]

Describe the bug
Some buttons do not display well in small window sizes.

To Reproduce

before-with-title-bar.webm

before.webm

Expected behavior
Following Firefox's default behavior, the button should disappear if the width of the window size does not have enough space.

Setup information

• OS: Ubuntu, Pop!_OS
• Installation method: APT, raw download (developer version)
• Firefox version: 111, 112
• Theme version: v111

Additional context

I try to fix this by adding the below code, which can simulate the fully responsive behavior like Firefox well but not sure if that is a good way or not since the code is a bit mazy. Thanks.

/* Enable title bar */
@media (max-width: 470px) {
  #nav-bar-overflow-button {
    -moz-window-dragging: drag !important;
    visibility: hidden !important;
  }
}

/* Disable title bar + enable close button only  */
@media not ((-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button)) {
  @media (max-width: 570px) {
    :root[tabsintitlebar] #nav-bar-overflow-button {
      display: none !important;
    }
  }

  @media (max-width: 475px) {
    :root[tabsintitlebar] #unified-extensions-button {
      display: none !important;
    }
  }
}

/* Disable title bar + enable either minimize or maximize button  */
@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button) {
  @media (max-width: 615px) {
    :root[tabsintitlebar] #nav-bar-overflow-button {
      -moz-window-dragging: drag !important;
      visibility: hidden !important;
    }
  }

  @media (max-width: 580px) {
    :root[tabsintitlebar] #unified-extensions-button {
      display: none !important;
    }
  }

  @media (max-width: 475px) {
    :root[tabsintitlebar] #PanelUI-button {
      display: none !important;
    }
  }
}

/* Disable title bar + enable both minimize and maximize button  */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) {
  @media (max-width: 645px) {
    :root[tabsintitlebar] #nav-bar-overflow-button {
      -moz-window-dragging: drag !important;
      visibility: hidden !important;
    }
  }

  @media (max-width: 610px) {
    :root[tabsintitlebar] #unified-extensions-button {
      -moz-window-dragging: drag !important;
      visibility: hidden !important;
    }
  }

  @media (max-width: 575px) {
    :root[tabsintitlebar] #PanelUI-button {
      display: none !important;
    }
  }

  @media (max-width: 475px) {
    :root[tabsintitlebar] #reload-button {
      display: none !important;
    }
  }
}

after-no-title-bar.webm

after-1-btn.webm

after-2-btn.webm

after-3-btn.webm

In some sections I use visibility hidden instead of display none is to prevent icon flickering (like below Random User Agent icon), also have some extra space is easier to drag the window.

after-with-display-none.webm

[rafaelmardojai]

Duplicated of #133.

[rafaelmardojai]

Also kind of related to #425.

[rafaelmardojai]

Also, I'm not sure if hiding the overflow menu and main menu is a good decision.