From 810dcb90ce689530dea940791128c7f5b18bc4e1 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 26 Jan 2024 02:47:51 +0530
Subject: [PATCH] refactored the divs, prevent overlap

---
 .../src/conversation/ConversationBubble.tsx   | 154 +++++++++---------
 1 file changed, 78 insertions(+), 76 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index e4add343..082d7d02 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -65,7 +65,7 @@ const ConversationBubble = forwardRef<
         ref={ref}
         className={`flex self-start flex-wrap ${className} group flex-col pr-20  dark:text-bright-gray`}
       >
-        <div className="flex self-start flex-wrap md:flex-nowrap">
+        <div className="flex self-start flex-wrap lg:flex-nowrap">
           <Avatar
             className="mt-2 h-12 w-12 text-2xl"
             avatar={
@@ -191,95 +191,97 @@ const ConversationBubble = forwardRef<
               </>
             )}
           </div>
-          <div
-            className={`relative mr-5  items-center justify-center lg:invisible block 
+          <div className='flex justify-center'>
+            <div
+              className={`relative mr-5  items-center justify-center lg:invisible block 
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
-              }`}
-          >
-            <div className="absolute left-2 top-4">
-              <div
-                className={`flex items-center justify-center rounded-full p-2 
+                }`}
+            >
+              <div className="absolute left-2 top-4">
+                <div
+                  className={`flex items-center justify-center rounded-full p-2 
                 ${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
-              >
-                {copied ? (
-                  <CheckMark
-                    className="cursor-pointer stroke-green-2000"
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  />
-                ) : (
-                  <Copy
-                    className={`cursor-pointer fill-none`}
-                    onClick={() => {
-                      handleCopyClick(message);
-                    }}
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  ></Copy>
-                )}
+                >
+                  {copied ? (
+                    <CheckMark
+                      className="cursor-pointer stroke-green-2000"
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    />
+                  ) : (
+                    <Copy
+                      className={`cursor-pointer fill-none`}
+                      onClick={() => {
+                        handleCopyClick(message);
+                      }}
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    ></Copy>
+                  )}
+                </div>
               </div>
             </div>
-          </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
+              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 
                   ${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>
+                        ? '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>
               </div>
             </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
+            <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'}`}
-              >
-                <Dislike
-                  className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
-                    ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
-                    : 'fill-none  stroke-gray-4000'
-                    }`}
-                  onClick={() => {
-                    handleFeedback?.('DISLIKE');
-                    setIsDislikeClicked(true);
-                    setIsLikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsDislikeHovered(true)}
-                  onMouseLeave={() => setIsDislikeHovered(false)}
-                ></Dislike>
+                  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 dark:fill-transparent stroke-red-2000'
+                      : 'fill-none  stroke-gray-4000'
+                      }`}
+                    onClick={() => {
+                      handleFeedback?.('DISLIKE');
+                      setIsDislikeClicked(true);
+                      setIsLikeClicked(false);
+                    }}
+                    onMouseEnter={() => setIsDislikeHovered(true)}
+                    onMouseLeave={() => setIsDislikeHovered(false)}
+                  ></Dislike>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-10 mt-2 max-w-[300px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
+          <div className="ml-10 mt-12 sm:mt-2 max-w-[300px] sm:max-w-[800px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
             <p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
               Source: {sources[openSource].title}
             </p>