Min, max and close buttons misaligned when using compact/normal mode with vertical tabs

### Describe the bug

I have the horizontal tabbar disabled and have Tree style tabs installed for vertical tabs.

This bug doesn't happen when not using vertical tabs.

When using normal density the hover effects don't fill the full space, in compact mode the hover effects take too much space.

This bug is only visible when hovering over any of the 3 buttons.

Should I also provide my Tree style tabs settings or would that not be the cause of this bug?

### Expected behavior

The buttons should be aligned properly.

### Screenshots

You might have to zoom in.

Compact:

Normal:

### OS

Windows 10

### OS - Others

_No response_

### Firefox Version

v 112.0

### Distribution

- [ ] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [X] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)

### Theme

- [ ] Light
- [X] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [ ] System Default
- [X] Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))

### Theme - More Info

The system theme is dark mode and the specific theme I use in firefox is this one:
https://addons.mozilla.org/en-GB/firefox/addon/perfect-darkness/

### `user.js` setup

```
user_pref("userChrome.icon.disabled", true);
user_pref("userChrome.hidden.tabbar", true);
user_pref("userChrome.autohide.sidebar", true);
user_pref("userChrome.hidden.sidebar_header", true);
user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
user_pref("userChrome.sidebar.overlap", true);
```

### Additional context

My userChrome is as follows:

```
/*** Right-click menu ***/

html#main-window menupopup:not(.in-menulist) {
--menu-border-color: black !important;
--panel-border-color: var(--menu-border-color) !important;
}

html#main-window menupopup:not(.in-menulist) menuseparator {
--menu-border-color: black !important;
border-top: 1px solid var(--menu-border-color) !important;
}

/*** Drop-down menus menu ***/

:root {
--panel-separator-color: black !important;
}

html#main-window menupopup:not(.in-menulist, [placespopup]) menuseparator,
toolbarbutton menupopup[placespopup] menuseparator::before {
--menu-border-color: black !important;
}

/*** Nav bar horizontal seperators ***/

:root{
--autocomplete-popup-separator-color: black !important;
}

/*** Tooltips ***/

tooltip {
background-color: #1E2021!important;
color: white!important;
border-color: black!important;
}

/*** Statuspanel ***/

:root #statuspanel-label{
background-color: rgb(30,32,33) !important;
color: rgb(255,255,255) !important;
border-color: black !important;
}

/*** Footer & Container ***/

#customization-footer {
border: black !important;
background-color: #1E2021 !important;
}

#customization-container {
background-color: #1E2021 !important;
background-image: none !important;
}

/* Sidebery */
#main-window[titlepreface*="[S] "] .tabbrowser-tab {
visibility: collapse;
}

#main-window[titlepreface*="[S] "] .titlebar-button {
height: 40px;
}

#main-window[titlepreface*="[S] "] #nav-bar {
margin-top: -40px;
}
#main-window[titlepreface*="[S] "][tabsintitlebar="true"] #nav-bar {
margin-right: 137px;
}
#main-window[titlepreface*="[S] "] #titlebar-spacer {
background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="[S] "] #titlebar-buttonbox-container {
background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="[S] "] .titlebar-color {
background-color: var(--toolbar-bgcolor);
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
visibility: collapse;
}

/* Show sidebar only when the cursor is over it */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
--uc-sidebar-width: 47px;
--uc-sidebar-hover-width: 232px;
--uc-autohide-sidebar-delay: 500ms; /* Wait 0.6s before hiding sidebar */
position: relative;
min-width: var(--uc-sidebar-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
z-index:1;
margin-top: -1px;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] {
direction: rtl;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{
direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl){
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
direction: rtl;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
transition: min-width 115ms linear !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar {
min-width: var(--uc-sidebar-hover-width) !important;
transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important;
box-shadow: 0 0 4px rgba(10,10,10, .5);
clip-path: inset(0px -15px 0px -15px);
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
background-color: var(--toolbar-bgcolor) !important;
border-inline: 1px solid var(--chrome-content-separator-color);
border-inline-width: 0px 1px;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * {
border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel {
inset-inline: auto 0px !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label {
margin-inline: 0px !important;
border-left-style: solid !important;
}
```

Reproduce the issue with vertical tabs enabled and compare normal versus compact density while hovering the min, max, and close buttons. Trace the SCSS rules controlling the titlebar buttons and hover areas; done means all three buttons are aligned and their hover effects fill the intended space in both modes.

Written by the indexing model from the issue text.