From e7a7d93c14e47c8a7a73272fcf3afaebd7e3bfa5 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 7 Jul 2025 13:16:02 -0300
Subject: [PATCH] fix: Improve AppHeader layout responsiveness glitch (#8907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (appHeaderComponent/index.tsx): Remove unnecessary classes and adjust styling for better layout and performance.

* 🔧 (appHeaderComponent/index.tsx): update classNames to improve layout and styling of the app header component
---
 .../src/components/core/appHeaderComponent/index.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/core/appHeaderComponent/index.tsx b/src/frontend/src/components/core/appHeaderComponent/index.tsx
index 20f5a9237..e461af252 100644
--- a/src/frontend/src/components/core/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/index.tsx
@@ -56,7 +56,7 @@ export default function AppHeader(): JSX.Element {
     >
       {/* Left Section */}
       <div
-        className={`z-30 flex items-center gap-2`}
+        className={`z-30 flex shrink-0 items-center gap-2`}
         data-testid="header_left_section_wrapper"
       >
         <Button
@@ -80,13 +80,13 @@ export default function AppHeader(): JSX.Element {
       </div>
 
       {/* Middle Section */}
-      <div className="absolute left-1/2 w-full flex-1 -translate-x-1/2">
+      <div className="absolute left-1/2 -translate-x-1/2">
         <FlowMenu />
       </div>
 
       {/* Right Section */}
       <div
-        className={`relative left-3 z-30 flex items-center gap-3`}
+        className={`relative left-3 z-30 flex shrink-0 items-center gap-3`}
         data-testid="header_right_section_wrapper"
       >
         <>