Merge pull request #1024 from blackviking27/feat-bubble-width

arc53 · Jul 9, 2024 · 1776f6e · 1776f6e
2 parents b58c534 + 1224f94
commit 1776f6e
Showing 1 changed file with 67 additions and 67 deletions.
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
@@ -53,7 +53,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col pr-20  dark:text-bright-gray`}
+        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
       >
         <div className="flex flex-wrap self-start lg:flex-nowrap">
           <Avatar
@@ -208,82 +208,82 @@ const ConversationBubble = forwardRef<
               </>
             )}
           </div>
-          <div className="flex justify-center">
-            <div
-              className={`relative mr-5  block items-center justify-center lg:invisible 
+        </div>
+        <div className="my-2 flex justify-start lg:ml-12">
+          <div
+            className={`relative mr-5  block items-center justify-center lg:invisible 
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
-            >
-              <div className="absolute left-2 top-4">
-                <CoppyButton text={message} />
-              </div>
+          >
+            <div>
+              <CoppyButton text={message} />
             </div>
-            <div
-              className={`relative mr-5 flex items-center justify-center ${
-                !isLikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'LIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-6 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
-                    isLikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
-                  }`}
-                >
-                  <Like
-                    className={`cursor-pointer 
+          </div>
+          <div
+            className={`relative mr-5 flex items-center justify-center ${
+              !isLikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
+                  isLikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Like
+                  className={`cursor-pointer 
                   ${
                     isLikeClicked || feedback === 'LIKE'
                       ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
                       : 'fill-none  stroke-gray-4000'
                   }`}
-                    onClick={() => {
-                      handleFeedback?.('LIKE');
-                      setIsLikeClicked(true);
-                      setIsDislikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsLikeHovered(true)}
-                    onMouseLeave={() => setIsLikeHovered(false)}
-                  ></Like>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('LIKE');
+                    setIsLikeClicked(true);
+                    setIsDislikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsLikeHovered(true)}
+                  onMouseLeave={() => setIsLikeHovered(false)}
+                ></Like>
               </div>
             </div>
-            <div
-              className={`mr-13 relative flex items-center justify-center ${
-                !isDislikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'DISLIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-10 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 ${
-                    isDislikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
+          </div>
+          <div
+            className={`mr-13 relative flex items-center justify-center ${
+              !isDislikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 ${
+                  isDislikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Dislike
+                  className={`cursor-pointer ${
+                    isDislikeClicked || feedback === 'DISLIKE'
+                      ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
+                      : 'fill-none  stroke-gray-4000'
                   }`}
-                >
-                  <Dislike
-                    className={`cursor-pointer ${
-                      isDislikeClicked || feedback === 'DISLIKE'
-                        ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                        : 'fill-none  stroke-gray-4000'
-                    }`}
-                    onClick={() => {
-                      handleFeedback?.('DISLIKE');
-                      setIsDislikeClicked(true);
-                      setIsLikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsDislikeHovered(true)}
-                    onMouseLeave={() => setIsDislikeHovered(false)}
-                  ></Dislike>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('DISLIKE');
+                    setIsDislikeClicked(true);
+                    setIsLikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsDislikeHovered(true)}
+                  onMouseLeave={() => setIsDislikeHovered(false)}
+                ></Dislike>
               </div>
             </div>
           </div>