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

fix: border and editor display issues (#4142)

Browse source 
* Fixed border on chat input on playground

* Fixed ace editor not taking up entire screen
This commit is contained in:
Lucas Oliveira 2024-10-14 17:32:09 -03:00 • committed by GitHub
commit e043964585
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 5 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
View file

@ -35,10 +35,7 @@ const TextAreaWrapper = ({
? "form-modal-no-input bg-input" ? "form-modal-no-input bg-input"
: "form-modal-lock-false bg-background"; : "form-modal-lock-false bg-background";
const fileClass = const fileClass = files.length > 0 ? "!rounded-t-none border-t-0" : "";
files.length > 0
? "rounded-b-lg ring-0 focus:ring-0 focus:border-2 rounded-t-none border-t-0 border-border focus:border-t-0 focus:border-ring"
: "rounded-md border-t border-border focus:ring-0 focus:border-2 focus:border-ring";
const additionalClassNames = "form-modal-lockchat pl-14"; const additionalClassNames = "form-modal-lockchat pl-14";
@ -53,7 +50,6 @@ const TextAreaWrapper = ({
data-testid="input-chat-playground" data-testid="input-chat-playground"
onFocus={(e) => { onFocus={(e) => {
setInputFocus(true); setInputFocus(true);
e.target.style.borderTopWidth = "0";
}} }}
onBlur={() => setInputFocus(false)} onBlur={() => setInputFocus(false)}
onKeyDown={(event) => { onKeyDown={(event) => {

6
src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
View file

@ -1,7 +1,5 @@
export const getClassNamesFilePreview = (inputFocus) => { export const getClassNamesFilePreview = (inputFocus) => {
return `flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll ${ return `flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll border ${
inputFocus inputFocus ? "border-ring" : ""
? "border border-b-0 border-ring border-2"
: "border border-b-0 border-border"
}`; }`;
}; };

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -221,7 +221,7 @@ export default function CodeAreaModal({
onChange={(value) => { onChange={(value) => {
setCode(value); setCode(value);
}} }}
className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600" className="h-full min-w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
/> />
</div> </div>
<div <div

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

@ -949,7 +949,7 @@
@apply block w-full overflow-auto 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-border p-4 pr-16 custom-scroll focus:border-ring focus:ring-0 sm:text-sm;
} }
.form-modal-send-icon-position { .form-modal-send-icon-position {
@apply absolute bottom-2 right-4; @apply absolute bottom-2 right-4;