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 ? ( return currentFlow && onFlowPage ? (
<div <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" data-testid="menu_bar_wrapper"
> >
<div <div
@ -263,15 +263,15 @@ export const MenuBar = ({}: {}): JSX.Element => {
</div> </div>
<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" data-testid="menu_bar_display"
> >
<div <div
className="header-menu-bar-display-2 truncate" className="header-menu-bar-display-2 shrink-0"
data-testid="menu_bar_display_wrapper" data-testid="menu_bar_display_wrapper"
> >
<div <div
className="header-menu-flow-name-2 truncate" className="header-menu-flow-name-2 shrink-0"
data-testid="flow-configuration-button" data-testid="flow-configuration-button"
> >
<div <div
@ -280,7 +280,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
> >
<Input <Input
className={cn( 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", "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", "border-0 outline-none focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
!editingName && "text-primary hover:opacity-80", !editingName && "text-primary hover:opacity-80",
@ -301,7 +301,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
/> />
<span <span
ref={measureRef} 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" aria-hidden="true"
data-testid="flow_name" 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 */} {/* Left Section */}
<div <div
className={`flex items-center gap-2`} className={`z-30 flex items-center gap-2`}
data-testid="header_left_section_wrapper" data-testid="header_left_section_wrapper"
> >
<Button <Button
@ -77,13 +77,13 @@ export default function AppHeader(): JSX.Element {
</div> </div>
{/* Middle Section */} {/* 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 /> <FlowMenu />
</div> </div>
{/* Right Section */} {/* Right Section */}
<div <div
className={`flex items-center gap-2`} className={`z-30 flex items-center gap-2`}
data-testid="header_right_section_wrapper" data-testid="header_right_section_wrapper"
> >
{!ENABLE_DATASTAX_LANGFLOW && ( {!ENABLE_DATASTAX_LANGFLOW && (
@ -131,9 +131,7 @@ export default function AppHeader(): JSX.Element {
name="Bell" name="Bell"
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
/> />
<span className="hidden whitespace-nowrap 2xl:inline"> <span className="hidden whitespace-nowrap">Notifications</span>
Notifications
</span>
</Button> </Button>
</AlertDropdown> </AlertDropdown>
</ShadTooltip> </ShadTooltip>
@ -141,13 +139,13 @@ export default function AppHeader(): JSX.Element {
{!ENABLE_DATASTAX_LANGFLOW && ( {!ENABLE_DATASTAX_LANGFLOW && (
<> <>
<ShadTooltip <ShadTooltip
content="Go to LangflowStore" content="Go to Langflow Store"
side="bottom" side="bottom"
styleClasses="z-10" styleClasses="z-10"
> >
<Button <Button
variant="ghost" variant="ghost"
className={` ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""}`} className={` ${lastPath === "store" ? "bg-accent text-accent-foreground" : ""} z-50`}
onClick={() => { onClick={() => {
navigate("/store"); navigate("/store");
}} }}
@ -157,9 +155,7 @@ export default function AppHeader(): JSX.Element {
name="Store" name="Store"
className="side-bar-button-size h-[18px] w-[18px]" className="side-bar-button-size h-[18px] w-[18px]"
/> />
<span className="hidden whitespace-nowrap 2xl:inline"> <span className="hidden whitespace-nowrap">Store</span>
Store
</span>
</Button> </Button>
</ShadTooltip> </ShadTooltip>
<Separator <Separator