Middle Header: Fix overlapping toolbar elements (#6551)

src/components/middle/MiddleHeader.scss

@@ -71,6 +71,8 @@
   }
 
   .header-tools {
+    z-index: 1;
+
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -78,6 +80,8 @@
 
     margin-left: auto;
 
+    background-color: var(--color-background);
+
     body.no-page-transitions & {
       &,
       .AudioPlayer,

src/components/middle/panes/HeaderPinnedMessage.module.scss

@@ -82,6 +82,7 @@
   cursor: var(--custom-cursor, pointer);
 
   position: relative;
+  z-index: 1;
 
   overflow: hidden;
   display: flex;
@@ -94,6 +95,8 @@
   padding-left: 0.375rem;
   border-radius: var(--border-radius-messages-small);
 
+  background-color: var(--color-background);
+
   &:hover:not(.no-hover) {
     background-color: var(--color-interactive-element-hover);
   }