From 9b177320970c30749387dc6b319422efc9d39907 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 13 Jan 2026 01:14:13 +0100
Subject: [PATCH] Middle Header: Fix overlapping toolbar elements (#6551)

---
 src/components/middle/MiddleHeader.scss                     | 4 ++++
 src/components/middle/panes/HeaderPinnedMessage.module.scss | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 733d7bd98..33b0b29cb 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/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,
diff --git a/src/components/middle/panes/HeaderPinnedMessage.module.scss b/src/components/middle/panes/HeaderPinnedMessage.module.scss
index fc119b7b6..3b0f75eee 100644
--- a/src/components/middle/panes/HeaderPinnedMessage.module.scss
+++ b/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);
   }