Merge pull request #323 from yz778/layout-shift

fix: layout shift caused by hovering over icons + misc items

Author: n4ze3m

src/components/Common/Playground/Message.tsx

@@ -53,7 +53,7 @@ export const PlaygroundMessage = (props: Props) => {
   const { cancel, isSpeaking, speak } = useTTS()
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl  flex lg:px-0 m-auto w-full">
+      <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
@@ -132,7 +132,7 @@ export const PlaygroundMessage = (props: Props) => {
                   </>
                 ) : (
                   <p
-                    className={`prose dark:prose-invert whitespace-pre-line	 prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
+                    className={`prose dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
                       props.message_type &&
                       "italic text-gray-500 dark:text-gray-400 text-sm"
                     }`}>
@@ -148,7 +148,7 @@ export const PlaygroundMessage = (props: Props) => {
                 />
               )}
             </div>
-            {/* source if aviable */}
+            {/* source if available */}
             {props.images &&
               props.images &&
               props.images.filter((img) => img.length > 0).length > 0 && (
@@ -196,10 +196,10 @@ export const PlaygroundMessage = (props: Props) => {
             )}
             {!props.isProcessing && !editMode && (
               <div
-                className={`space-x-2 gap-2 mt-3 ${
+                className={`space-x-2 gap-2 mt-3 flex ${
                   props.currentMessageIndex !== props.totalMessages - 1
-                    ? "hidden group-hover:flex"
-                    : "flex"
+                    ? "invisible group-hover:visible"
+                    : ""
                 }`}>
                 {props.isTTSEnabled && (
                   <Tooltip title={t("tts")}>