The height of the output window when a build fails is too small

[kelvinye-lab]

Bug Description

Reproduction

Expected behavior

Adaptive according to height

Who can help?

No response

Operating System

macos

Langflow Version

1.0.14

Python Version

3.12

Screenshot

No response

Flow File

No response

[dosubot[bot]]

Hey @YeKelvin! I'm here to help you with bugs, questions, and contributions. Let's work together to solve the issue you're facing.

To make the output window height adaptive to the content when a build fails, you can modify the max-h-96 class in the div containing the output to use a dynamic height based on the content. Here is the relevant part of the code with the necessary changes:

<div className="mb-2 mt-2 flex justify-center font-semibold text-muted-foreground">
  Output
</div>
<div className="overflow-auto font-normal custom-scroll" style={{ maxHeight: 'auto' }}>
  {validationString.split("\n").map((line, index) => (
    <div className="font-normal" key={index}>
      {line}
    </div>
  ))}
</div>

By setting maxHeight to auto, the height of the output window will adapt to the content dynamically. Additionally, you can use a similar approach as shown in the CodeAreaModal component from the langflow project, where the height is adjusted based on the presence of an error:

useEffect(() => {
  const delayedFunction = setTimeout(() => {
    if (error?.detail.error !== undefined) {
      setHeight("90%");
    }
  }, 600);

  return () => {
    clearTimeout(delayedFunction);
  };
}, [error, setHeight]);

return (
  <div className="flex h-full w-full flex-col transition-all">
    <div className="h-full w-full">
      <AceEditor
        readOnly={readonly}
        value={code}
        mode="python"
        setOptions={{ fontFamily: "monospace" }}
        height={height ?? "100%"}
        highlightActiveLine={true}
        showPrintMargin={false}
        fontSize={14}
        showGutter
        enableLiveAutocompletion
        theme={dark ? "twilight" : "github"}
        name="CodeEditor"
        onChange={(value) => {
          setCode(value);
        }}
        className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
      />
    </div>
    <div
      className={
        "whitespace-break-spaces transition-all delay-500" +
        (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
      }
    >
      <div className="mt-5 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
        <h1 className="text-lg text-error">{error?.detail?.error}</h1>
        <div className="ml-2 mt-2 w-full text-sm text-destructive word-break-break-word">
          <span className="w-full word-break-break-word">
            {error?.detail?.traceback}
          </span>
        </div>
      </div>
    </div>
    <div className="flex h-fit w-full justify-end">
      <Button
        className="mt-3"
        onClick={handleClick}
        type="submit"
        id="checkAndSaveBtn"
        disabled={readonly}
      >
        Check & Save
      </Button>
    </div>
  </div>
);

This approach ensures that the height of the output window adapts dynamically based on the content, providing a better user experience ^[1][2].

To continue talking to Dosu, mention @dosu.

[kelvinye-lab]

[anovazzi1]

Hello @YeKelvin, thanks for the feedback! We've already fixed this issue on the main branch, and the fix will be available in the next release.