From c44c574c99206238aa217ce807d03309d61838c6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 3 Mar 2024 01:24:39 +0100
Subject: [PATCH] Fixed flexbox in io

---
 src/frontend/src/components/IOview/index.tsx              | 2 +-
 src/frontend/src/components/codeTabsComponent/index.tsx   | 8 +++-----
 .../src/components/newChatView/chatMessage/index.tsx      | 8 ++++----
 src/frontend/src/style/applies.css                        | 6 +++---
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 87bd8de20..b30136ef7 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -263,7 +263,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
             )}
 
             {haveChat ? (
-              <div className="flex h-full w-full">
+              <div className="flex h-full w-full flex-grow-0">
                 {selectedViewField && (
                   <div
                     className={cn(
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 3e41df62e..cdd548ca3 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -192,13 +192,11 @@ export default function CodeTabsComponent({
                   dangerouslySetInnerHTML={{ __html: tab.description }}
                 ></div>
               )}
-              <SyntaxHighlighter
-                className="mt-0 h-full w-full overflow-auto custom-scroll"
-                language={tab.mode}
-                style={oneDark}
+              <code
+                className="mt-0 h-full overflow-auto custom-scroll rounded-sm text-left" 
               >
                 {tab.code}
-              </SyntaxHighlighter>
+              </code>
             </div>
           ) : idx === 4 ? (
             <>
diff --git a/src/frontend/src/components/newChatView/chatMessage/index.tsx b/src/frontend/src/components/newChatView/chatMessage/index.tsx
index 7c606679f..a619f3f57 100644
--- a/src/frontend/src/components/newChatView/chatMessage/index.tsx
+++ b/src/frontend/src/components/newChatView/chatMessage/index.tsx
@@ -155,9 +155,9 @@ export default function ChatMessage({
                 />
               )}
               {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-              <div className="w-full">
-                <div className="w-full dark:text-white">
-                  <div className="w-full">
+              <div className="w-full flex flex-col">
+                <div className="w-full flex flex-col dark:text-white">
+                  <div className="w-full flex flex-col">
                     {useMemo(
                       () =>
                         chatMessage === "" && lockChat ? (
@@ -169,7 +169,7 @@ export default function ChatMessage({
                           <Markdown
                             remarkPlugins={[remarkGfm, remarkMath]}
                             rehypePlugins={[rehypeMathjax]}
-                            className="markdown prose min-w-full text-primary word-break-break-word
+                            className="markdown flex flex-col prose text-primary word-break-break-word
 dark:prose-invert"
                             components={{
                               pre({ node, ...props }) {
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index ab3e8e23d..77a760255 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -845,13 +845,13 @@
   }
 
   .api-modal-tabs {
-    @apply flex h-full max-w-full flex-col overflow-hidden rounded-md border bg-muted text-center sm:w-[75vw] md:w-[75vw] lg:w-[75vw] xl:w-[76vw] 2xl:w-full;
+    @apply flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center;
   }
   .api-modal-tablist-div {
     @apply flex items-center justify-between px-2 py-2;
   }
   .api-modal-tabs-content {
-    @apply -mt-1 h-full w-full  px-4 pb-4;
+    @apply -mt-1 h-full w-full px-4 pb-4;
   }
   .api-modal-accordion-display {
     @apply mt-2 flex h-full w-full;
@@ -902,7 +902,7 @@
     @apply flex-max-width px-2 py-6 pl-4 pr-9;
   }
   .form-modal-chatbot-icon {
-    @apply mb-3 ml-3 mr-6 mt-1;
+    @apply flex flex-col mb-3 ml-3 mr-6 mt-1;
   }
   .form-modal-chat-image {
     @apply flex flex-col items-center gap-1;