Merge pull request #323 from yz778/layout-shift

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

src/components/Common/Playground/Message.tsx

@@ -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")}>