diff --git a/packages/ndla-ui/src/Embed/AudioEmbed.tsx b/packages/ndla-ui/src/Embed/AudioEmbed.tsx index 383508799e..185bc42c92 100644 --- a/packages/ndla-ui/src/Embed/AudioEmbed.tsx +++ b/packages/ndla-ui/src/Embed/AudioEmbed.tsx @@ -7,6 +7,7 @@ */ import { Figure } from "@ndla/primitives"; +import { styled } from "@ndla/styled-system/jsx"; import type { AudioMetaData } from "@ndla/types-embed"; import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder"; import type { Author } from "./ImageEmbed"; @@ -14,6 +15,10 @@ import AudioPlayer from "../AudioPlayer"; import { EmbedByline } from "../LicenseByline"; import { licenseAttributes } from "../utils/licenseAttributes"; +const StyledFigure = styled(Figure, { + base: { clear: "both" }, +}); + interface Props { embed: AudioMetaData; lang?: string; @@ -46,7 +51,7 @@ const AudioEmbed = ({ embed, lang }: Props) => { const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url); return ( -
+ { type={data.audioType === "standard" ? "audio" : "podcast"} copyright={embed.data.copyright} /> -
+ ); }; diff --git a/packages/ndla-ui/src/Embed/IframeEmbed.tsx b/packages/ndla-ui/src/Embed/IframeEmbed.tsx index c3af0b1425..ecb5282ac4 100644 --- a/packages/ndla-ui/src/Embed/IframeEmbed.tsx +++ b/packages/ndla-ui/src/Embed/IframeEmbed.tsx @@ -25,6 +25,12 @@ const StyledIframe = styled("iframe", { }, }); +const StyledFigure = styled(Figure, { + base: { + clear: "both", + }, +}); + const IframeEmbed = ({ embed }: Props) => { const { t } = useTranslation(); const iframeRef = useRef(null); @@ -50,7 +56,7 @@ const IframeEmbed = ({ embed }: Props) => { const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext; const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" }; return ( -
+ { caption={embedData.caption ?? ""} buttonText={t("license.other.itemImage.ariaLabel")} /> -
+ ); } @@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => { const urlOrTitle = title || url; return ( -
+ { allow="fullscreen; encrypted-media" loading="lazy" /> -
+ ); }; diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx index b1b44bfc7d..907d9ac864 100644 --- a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx +++ b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx @@ -45,6 +45,12 @@ const StyledSafeLink = styled(SafeLink, { }, }); +const Wrapper = styled("div", { + base: { + clear: "both", + }, +}); + const UuDisclaimerEmbed = ({ embed, children }: Props) => { if (embed.status === "error") { return null; @@ -59,7 +65,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => { ) : null; return ( -
+ @@ -68,7 +74,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
{children}
-
+ ); }; diff --git a/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx b/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx index 43180e434e..6e71b0125a 100644 --- a/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx +++ b/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx @@ -98,6 +98,7 @@ const StyledSection = styled("section", { flexDirection: "column", alignItems: "center", gap: "medium", + clear: "both", }, }); diff --git a/packages/primitives/src/Table.tsx b/packages/primitives/src/Table.tsx index 52ff5dd4d2..ba49138d18 100644 --- a/packages/primitives/src/Table.tsx +++ b/packages/primitives/src/Table.tsx @@ -21,6 +21,7 @@ export const Table = styled( maxWidth: "100%", padding: "4xsmall", tableLayout: "fixed", + clear: "both", "& > caption": { fontWeight: "bold", textAlign: "left",