diff --git a/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx b/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx index 4808324e29..690fb5156f 100644 --- a/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx +++ b/frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx @@ -11,7 +11,7 @@ const ARTICLE_MAX_WIDTH = 890 const CONTAINER_PADDING = 24 const WIDE_LAYOUT_MIN_IMG_WIDTH = 900 -const Container = styled.div(({ theme }) => ({ +const Container = styled.figure(({ theme }) => ({ position: "relative", margin: "2rem auto", textAlign: "center", @@ -148,7 +148,7 @@ const Image = styled.img<{ layout: Layout }>(({ layout }) => ({ }, })) -const Caption = styled.p(({ theme }) => ({ +const Caption = styled.figcaption(({ theme }) => ({ "&&&&&": { ...theme.typography.body2, color: theme.custom.colors.silverGrayDark, diff --git a/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx index 32a0d2f22a..82f75e8511 100644 --- a/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx +++ b/frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx @@ -33,10 +33,11 @@ const StyledNodeViewWrapper = styled(NodeViewWrapper)<{ input { width: 100%; border: none; - text-align: center; + text-align: left; outline: none; - padding: 4px; + padding: 16px 0; font-size: 14px; + border-bottom: 1px solid #dde1e6; } p {