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

Fixed prompt modal oveflow

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-14 17:51:45 -03:00
commit 91074d9057
2 changed files with 129 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/frontend/src/modals/genericModal/index.tsx
View file

@ -204,12 +204,11 @@ export default function GenericModal({
aria-hidden="true" aria-hidden="true"
/> />
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content overflowHidden>
<div className="flex h-full flex-col">
<div <div
className={classNames( className={classNames(
!isEdit ? "rounded-lg border" : "", !isEdit ? "rounded-lg border" : "",
"flex h-full max-h-[85%] w-full", "flex h-full w-full",
)} )}
> >
{type === TypeModal.PROMPT && isEdit && !readonly ? ( {type === TypeModal.PROMPT && isEdit && !readonly ? (
@ -217,7 +216,7 @@ export default function GenericModal({
id={"modal-" + id} id={"modal-" + id}
data-testid={"modal-" + id} data-testid={"modal-" + id}
ref={divRefPrompt} ref={divRefPrompt}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1" className="form-input h-full w-full resize-none rounded-lg custom-scroll focus-visible:ring-1"
value={inputValue} value={inputValue}
onBlur={() => { onBlur={() => {
setIsEdit(false); setIsEdit(false);
@ -244,7 +243,7 @@ export default function GenericModal({
) : type !== TypeModal.PROMPT ? ( ) : type !== TypeModal.PROMPT ? (
<Textarea <Textarea
ref={textRef} ref={textRef}
className="form-input h-full w-full overflow-auto rounded-lg focus-visible:ring-1" className="form-input h-full w-full resize-none overflow-auto rounded-lg focus-visible:ring-1"
value={inputValue} value={inputValue}
onChange={(event) => { onChange={(event) => {
setInputValue(event.target.value); setInputValue(event.target.value);
@ -261,8 +260,9 @@ export default function GenericModal({
<></> <></>
)} )}
</div> </div>
</BaseModal.Content>
<div className="mt-6 flex h-fit w-full items-end justify-between"> <BaseModal.Footer>
<div className="flex w-full shrink-0 items-end justify-between">
<div className="mb-auto flex-1"> <div className="mb-auto flex-1">
{type === TypeModal.PROMPT && ( {type === TypeModal.PROMPT && (
<div className=" mr-2"> <div className=" mr-2">
@ -294,8 +294,7 @@ export default function GenericModal({
<div className="relative bottom-[1px]"> <div className="relative bottom-[1px]">
<span id={"badge" + index.toString()}> <span id={"badge" + index.toString()}>
{word.replace(/[{}]/g, "").length > 59 {word.replace(/[{}]/g, "").length > 59
? word.replace(/[{}]/g, "").slice(0, 56) + ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
"..."
: word.replace(/[{}]/g, "")} : word.replace(/[{}]/g, "")}
</span> </span>
</div> </div>
@ -334,8 +333,7 @@ export default function GenericModal({
{myButtonText} {myButtonText}
</Button> </Button>
</div> </div>
</div> </BaseModal.Footer>
</BaseModal.Content>
</BaseModal> </BaseModal>
); );
} }

4
src/frontend/src/style/applies.css
View file

@ -944,11 +944,11 @@
@apply bg-white text-primary; @apply bg-white text-primary;
} }
.code-highlight { .code-highlight {
@apply block max-h-[64vh] w-full overflow-y-hidden border-0 px-3 py-2 text-sm outline-0 word-break-break-word; @apply block w-full overflow-auto border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
} }
.code-nohighlight { .code-nohighlight {
@apply block max-h-[70vh] w-full overflow-y-hidden border-0 px-3 py-2 text-sm outline-0 word-break-break-word; @apply block w-full overflow-auto border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
} }
.form-modal-lockchat { .form-modal-lockchat {
@apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll focus:border-ring focus:ring-ring sm:text-sm; @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll focus:border-ring focus:ring-ring sm:text-sm;