diff --git a/src/modules/blocks/code/RenderCode.tsx b/src/modules/blocks/code/RenderCode.tsx index 24c4a8ae1..e189c808e 100644 --- a/src/modules/blocks/code/RenderCode.tsx +++ b/src/modules/blocks/code/RenderCode.tsx @@ -143,7 +143,7 @@ function RenderCodeImpl(props: RenderCodeImplProps) { '[data-joy-color-scheme="dark"] &': (renderPlantUML || renderMermaid) ? { backgroundColor: 'neutral.500' } : {}, // fade in children buttons - [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx, + [`&:hover > .${overlayButtonsClassName}`]: overlayButtonsActiveSx, // lots more style, incl font, background, embossing, radius, etc. ...props.sx, diff --git a/src/modules/blocks/html/RenderHtmlResponse.tsx b/src/modules/blocks/html/RenderHtmlResponse.tsx index bfc1535f1..bba247481 100644 --- a/src/modules/blocks/html/RenderHtmlResponse.tsx +++ b/src/modules/blocks/html/RenderHtmlResponse.tsx @@ -41,7 +41,7 @@ export function RenderHtmlResponse(props: { htmlBlock: HtmlBlock, sx?: SxProps } p: 1.5, // this block gets a thicker border display: 'block', overflowX: 'auto', - [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx, + [`&:hover > .${overlayButtonsClassName}`]: overlayButtonsActiveSx, ...sx, }} > diff --git a/src/modules/blocks/image/RenderImageURL.tsx b/src/modules/blocks/image/RenderImageURL.tsx index 8300d0865..23aca45ad 100644 --- a/src/modules/blocks/image/RenderImageURL.tsx +++ b/src/modules/blocks/image/RenderImageURL.tsx @@ -164,7 +164,7 @@ export const RenderImageURL = (props: { // resizeable image '& picture': { display: 'flex', justifyContent: 'center' }, '& img': { maxWidth: '100%', maxHeight: '100%' }, - [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx, + [`&:hover > .${overlayButtonsClassName}`]: overlayButtonsActiveSx, '&:hover .overlay-text': overlayButtonsActiveSx, // layout