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() const { cancel, isSpeaking, speak } = useTTS()
return ( return (
<div className="group w-full text-gray-800 dark:text-gray-100"> <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="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="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"> <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 <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 && props.message_type &&
"italic text-gray-500 dark:text-gray-400 text-sm" "italic text-gray-500 dark:text-gray-400 text-sm"
}`}> }`}>
@ -148,7 +148,7 @@ export const PlaygroundMessage = (props: Props) => {
/> />
)} )}
</div> </div>
{/* source if aviable */} {/* source if available */}
{props.images && {props.images &&
props.images && props.images &&
props.images.filter((img) => img.length > 0).length > 0 && ( props.images.filter((img) => img.length > 0).length > 0 && (
@ -196,10 +196,10 @@ export const PlaygroundMessage = (props: Props) => {
)} )}
{!props.isProcessing && !editMode && ( {!props.isProcessing && !editMode && (
<div <div
className={`space-x-2 gap-2 mt-3 ${ className={`space-x-2 gap-2 mt-3 flex ${
props.currentMessageIndex !== props.totalMessages - 1 props.currentMessageIndex !== props.totalMessages - 1
? "hidden group-hover:flex" ? "invisible group-hover:visible"
: "flex" : ""
}`}> }`}>
{props.isTTSEnabled && ( {props.isTTSEnabled && (
<Tooltip title={t("tts")}> <Tooltip title={t("tts")}>