iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix layout shift cause by hovering over icons + misc items

Browse Source
This commit is contained in:
yz778 2025-01-31 20:00:16 -08:00
parent b6814a9e19
commit be6b539787
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Common/Playground/Message.tsx
View File

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