From a35445ec2880114a865736a6d950ad31c19b2519 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 4 Aug 2023 12:47:21 -0300
Subject: [PATCH] Fixed chat message size

---
 .../components/codeTabsComponent/index.tsx    | 32 +++++++++++--------
 .../modals/formModal/chatMessage/index.tsx    |  6 ++--
 src/frontend/src/style/applies.css            | 12 +++----
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index bc9ca3a5a..27653fbd7 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -132,21 +132,25 @@ export default function CodeTabsComponent({
       }}
     >
       <div className="api-modal-tablist-div">
-        <TabsList>
-          {tabs.map((tab, index) => (
-            <TabsTrigger
-              className={
-                isMessage ? "data-[state=active]:bg-primary-foreground" : ""
-              }
-              key={index}
-              value={index.toString()}
-            >
-              {tab.name}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+        {tabs.length > 0 && tabs[0].name !== "" ? (
+          <TabsList>
+            {tabs.map((tab, index) => (
+              <TabsTrigger
+                className={
+                  isMessage ? "data-[state=active]:bg-primary-foreground" : ""
+                }
+                key={index}
+                value={index.toString()}
+              >
+                {tab.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        ) : (
+          <div></div>
+        )}
         {Number(activeTab) < 4 && (
-          <div className="float-right mx-1 flex gap-2">
+          <div className="float-right mx-1 mb-1 mt-2 flex gap-2">
             <button
               className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
               onClick={copyToClipboard}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index e9de65d0f..c132f025a 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -88,8 +88,8 @@ export default function ChatMessage({
                         <ReactMarkdown
                           remarkPlugins={[remarkGfm, remarkMath]}
                           rehypePlugins={[rehypeMathjax]}
-                          className="markdown prose inline-block text-primary word-break-break-word dark:prose-invert
-                      sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
+                          className="markdown prose min-w-full text-primary word-break-break-word
+                      dark:prose-invert"
                           components={{
                             pre({ node, ...props }) {
                               return <>{props.children}</>;
@@ -187,7 +187,7 @@ export default function ChatMessage({
                   }
                 />
               </button>
-              <span className="prose inline-block text-primary word-break-break-word dark:prose-invert">
+              <span className="prose text-primary word-break-break-word dark:prose-invert">
                 {promptOpen
                   ? template?.split("\n")?.map((line, index) => {
                       const regex = /{([^}]+)}/g;
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index b40614bd6..0281df7c2 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -336,7 +336,7 @@
     @apply flex h-7 w-7 items-center justify-center rounded-full text-2xl;
   }
   .card-component-title-size {
-    @apply inline-block w-full flex-1 word-break-break-word truncate-doubleline;
+    @apply w-full flex-1 word-break-break-word truncate-doubleline;
   }
   .card-component-delete-button {
     @apply flex self-start;
@@ -544,7 +544,7 @@
     @apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1;
   }
   .toggle-component-span {
-    @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out;
+    @apply pointer-events-none relative h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out;
   }
   .toggle-component-second-span {
     @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
@@ -590,13 +590,13 @@
     @apply flex-max-width items-center text-start;
   }
   .chat-message-modal-text {
-    @apply relative inline-block w-full text-start text-sm  font-normal text-muted-foreground;
+    @apply relative w-full text-start text-sm  font-normal text-muted-foreground;
   }
   .chat-message-modal-icon-div {
     @apply absolute -left-2 -top-1 cursor-pointer;
   }
   .chat-message-modal-thought {
-    @apply chat-message-modal-thought-cursor ml-3 inline-block h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground;
+    @apply chat-message-modal-thought-cursor ml-3 h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground;
   }
   .chat-message-modal-thought-cursor {
     @apply cursor-pointer overflow-scroll scrollbar-hide;
@@ -608,7 +608,7 @@
     @apply mt-1 animate-pulse cursor-default;
   }
   .chat-message-modal-alert {
-    @apply inline-block px-3 text-start text-muted-foreground;
+    @apply px-3 text-start text-muted-foreground;
   }
 
   .file-card-modal-image-div {
@@ -913,7 +913,7 @@
     @apply rounded-md border border-ring/60;
   }
   .form-modal-chat-thought-size {
-    @apply inline-block h-full w-[95%];
+    @apply h-full w-[95%];
   }
   .form-modal-chat-thought {
     @apply form-modal-chat-thought-border form-modal-chat-thought-size cursor-pointer overflow-scroll bg-background px-2 py-2 text-start text-primary scrollbar-hide;