From e0439645852ba1865a2bd093f9404fbf7e443b32 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:32:09 -0300
Subject: [PATCH] fix: border and editor display issues (#4142)

* Fixed border on chat input on playground

* Fixed ace editor not taking up entire screen
---
 .../chatView/chatInput/components/textAreaWrapper/index.tsx | 6 +-----
 .../chatView/chatInput/helpers/get-class-file-preview.ts    | 6 ++----
 src/frontend/src/modals/codeAreaModal/index.tsx             | 2 +-
 src/frontend/src/style/applies.css                          | 2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
index e8b585397..f8d16f24d 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -35,10 +35,7 @@ const TextAreaWrapper = ({
       ? "form-modal-no-input bg-input"
       : "form-modal-lock-false bg-background";
 
-  const fileClass =
-    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 fileClass = files.length > 0 ? "!rounded-t-none border-t-0" : "";
 
   const additionalClassNames = "form-modal-lockchat pl-14";
 
@@ -53,7 +50,6 @@ const TextAreaWrapper = ({
       data-testid="input-chat-playground"
       onFocus={(e) => {
         setInputFocus(true);
-        e.target.style.borderTopWidth = "0";
       }}
       onBlur={() => setInputFocus(false)}
       onKeyDown={(event) => {
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts b/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
index 7e957f586..de5422252 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
@@ -1,7 +1,5 @@
 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 ${
-    inputFocus
-      ? "border border-b-0 border-ring border-2"
-      : "border border-b-0 border-border"
+  return `flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll border  ${
+    inputFocus ? "border-ring" : ""
   }`;
 };
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index d3aa86533..ce80932d5 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -221,7 +221,7 @@ export default function CodeAreaModal({
               onChange={(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
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 232c7e168..b825c7f07 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -949,7 +949,7 @@
     @apply block w-full overflow-auto border-0 px-3 py-2 text-sm outline-0 word-break-break-word;
   }
   .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 {
     @apply absolute bottom-2 right-4;