From 1497061477c7abb5756c223d07c600e2b2ad10cc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:18:17 -0300
Subject: [PATCH] fix: make header flow title occupy remaining space (#7016)

* Fix flow title truncating

* Fix size not occupying whole screen
---
 .../components/FlowMenu/index.tsx              | 12 ++++++------
 .../core/appHeaderComponent/index.tsx          | 18 +++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 6eba2a4d2..5f3873558 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -230,7 +230,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
 
   return currentFlow && onFlowPage ? (
     <div
-      className="flex items-center justify-center gap-2 truncate"
+      className="flex w-full items-center justify-center gap-2"
       data-testid="menu_bar_wrapper"
     >
       <div
@@ -263,15 +263,15 @@ export const MenuBar = ({}: {}): JSX.Element => {
       </div>
 
       <div
-        className="overflow-hidden truncate text-sm sm:whitespace-normal"
+        className="shrink-0 overflow-hidden text-sm sm:whitespace-normal"
         data-testid="menu_bar_display"
       >
         <div
-          className="header-menu-bar-display-2 truncate"
+          className="header-menu-bar-display-2 shrink-0"
           data-testid="menu_bar_display_wrapper"
         >
           <div
-            className="header-menu-flow-name-2 truncate"
+            className="header-menu-flow-name-2 shrink-0"
             data-testid="flow-configuration-button"
           >
             <div
@@ -280,7 +280,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
             >
               <Input
                 className={cn(
-                  "h-6 w-full cursor-text font-semibold",
+                  "h-6 w-full shrink-0 cursor-text font-semibold",
                   "bg-transparent pl-1 pr-0 transition-colors duration-200",
                   "border-0 outline-none focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
                   !editingName && "text-primary hover:opacity-80",
@@ -301,7 +301,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               />
               <span
                 ref={measureRef}
-                className="invisible absolute left-0 top-0 -z-10 w-fit whitespace-pre pl-1 font-semibold"
+                className="invisible absolute left-0 top-0 -z-10 w-fit whitespace-pre font-semibold"
                 aria-hidden="true"
                 data-testid="flow_name"
               >
diff --git a/src/frontend/src/components/core/appHeaderComponent/index.tsx b/src/frontend/src/components/core/appHeaderComponent/index.tsx
index f3322bee5..34c8a69f5 100644
--- a/src/frontend/src/components/core/appHeaderComponent/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/index.tsx
@@ -53,7 +53,7 @@ export default function AppHeader(): JSX.Element {
     >
       {/* Left Section */}
       <div
-        className={`flex items-center gap-2`}
+        className={`z-30 flex items-center gap-2`}
         data-testid="header_left_section_wrapper"
       >
         <Button
@@ -77,13 +77,13 @@ export default function AppHeader(): JSX.Element {
       </div>
 
       {/* Middle Section */}
-      <div className="w-full flex-1 truncate md:max-w-[57%] lg:absolute lg:left-1/2 lg:max-w-[43%] lg:-translate-x-1/2 xl:max-w-[31%]">
+      <div className="w-full flex-1 truncate lg:absolute lg:left-1/2 lg:-translate-x-1/2">
         <FlowMenu />
       </div>
 
       {/* Right Section */}
       <div
-        className={`flex items-center gap-2`}
+        className={`z-30 flex items-center gap-2`}
         data-testid="header_right_section_wrapper"
       >
         {!ENABLE_DATASTAX_LANGFLOW && (
@@ -131,9 +131,7 @@ export default function AppHeader(): JSX.Element {
                   name="Bell"
                   className="side-bar-button-size h-[18px] w-[18px]"
                 />
-                <span className="hidden whitespace-nowrap 2xl:inline">
-                  Notifications
-                </span>
+                <span className="hidden whitespace-nowrap">Notifications</span>
               </Button>
             </AlertDropdown>
           </ShadTooltip>
@@ -141,13 +139,13 @@ export default function AppHeader(): JSX.Element {
         {!ENABLE_DATASTAX_LANGFLOW && (
           <>
             <ShadTooltip
-              content="Go to LangflowStore"
+              content="Go to Langflow Store"
               side="bottom"
               styleClasses="z-10"
             >
               <Button
                 variant="ghost"
-                className={` ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""}`}
+                className={` ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""} z-50`}
                 onClick={() => {
                   navigate("/store");
                 }}
@@ -157,9 +155,7 @@ export default function AppHeader(): JSX.Element {
                   name="Store"
                   className="side-bar-button-size h-[18px] w-[18px]"
                 />
-                <span className="hidden whitespace-nowrap 2xl:inline">
-                  Store
-                </span>
+                <span className="hidden whitespace-nowrap">Store</span>
               </Button>
             </ShadTooltip>
             <Separator