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 (
-
+
);
};
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 (
-
+
);
}
@@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => {
const urlOrTitle = title || url;
return (
-
+
);
};
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",