jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: make header flow title occupy remaining space (#7016)

Browse source 
* Fix flow title truncating

* Fix size not occupying whole screen
This commit is contained in:
Lucas Oliveira 2025-03-11 12:18:17 -03:00 • committed by GitHub
commit 1497061477
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
View file

@ -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"
>

18
src/frontend/src/components/core/appHeaderComponent/index.tsx
View file

@ -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