I have no idea why this is happening - maybe somebody with better knowledge of CSS can help me understand 🙂

      <DialogContent className="w-full max-w-screen-xl p-0">
        <div className="flex flex-col gap-4 px-4 pt-4">
          <DialogTitle className="text-xl">Workflows</DialogTitle>
        </div>
        <Separator />
        <div className="space-y-6 px-4 pb-4">
          <div>
            <div className="relative max-w-fit">
              <Textarea
                ref={promptTextareaRef}
                autoFocus
                placeholder="Ask something..."
                className="h-20 resize-none overflow-y-auto pb-14"
                value={promptValue}
                onChange={(e) => setPromptValue(e.target.value)}
                disabled={createJob.isPending}
              />
              <Button
                className="absolute bottom-3 right-3"
                disabled={!promptValue}
              >
                Submit
              </Button>
            </div>
          </div>

.... more code

Typing in the TextArea causes an overflow unless you set a fixed width on the DialogContent. Why is thta?