Fix block embeds positioning with float elements

NDLANO · Jan 6, 2025 · 657fcb6 · 657fcb6
1 parent 0554aa0
commit 657fcb6
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/packages/ndla-ui/src/Embed/AudioEmbed.tsx b/packages/ndla-ui/src/Embed/AudioEmbed.tsx
@@ -7,13 +7,18 @@
  */
 
 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";
 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 (
-    <Figure lang={lang} data-embed-type={type} {...licenseProps}>
+    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}
@@ -64,7 +69,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
         type={data.audioType === "standard" ? "audio" : "podcast"}
         copyright={embed.data.copyright}
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

diff --git 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<HTMLIFrameElement>(null);
@@ -50,15 +56,15 @@ const IframeEmbed = ({ embed }: Props) => {
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" };
     return (
-      <Figure data-embed-type="iframe">
+      <StyledFigure data-embed-type="iframe">
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
           url={embedData.url}
           caption={embedData.caption ?? ""}
           buttonText={t("license.other.itemImage.ariaLabel")}
         />
-      </Figure>
+      </StyledFigure>
     );
   }
 
@@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    <Figure data-embed-type="iframe">
+    <StyledFigure data-embed-type="iframe">
       <StyledIframe
         ref={iframeRef}
         title={urlOrTitle}
@@ -80,7 +86,7 @@ const IframeEmbed = ({ embed }: Props) => {
         allow="fullscreen; encrypted-media"
         loading="lazy"
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

diff --git 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 (
-    <div role="region" data-embed-type="uu-disclaimer">
+    <Wrapper role="region" data-embed-type="uu-disclaimer">
       <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationLine />
         <Disclaimer>
@@ -68,7 +74,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       <div data-uu-content="">{children}</div>
-    </div>
+    </Wrapper>
   );
 };
 

diff --git 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
@@ -21,6 +21,7 @@ export const Table = styled(
       maxWidth: "100%",
       padding: "4xsmall",
       tableLayout: "fixed",
+      clear: "both",
       "& > caption": {
         fontWeight: "bold",
         textAlign: "left",