Skip to content

Commit 4516b42

Browse files
committed
Fix block embeds positioning with float elements
1 parent 0554aa0 commit 4516b42

File tree

5 files changed

+29
-8
lines changed

5 files changed

+29
-8
lines changed

packages/ndla-ui/src/Embed/AudioEmbed.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,20 @@
77
*/
88

99
import { Figure } from "@ndla/primitives";
10+
import { styled } from "@ndla/styled-system/jsx";
1011
import type { AudioMetaData } from "@ndla/types-embed";
1112
import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
1213
import type { Author } from "./ImageEmbed";
1314
import AudioPlayer from "../AudioPlayer";
1415
import { EmbedByline } from "../LicenseByline";
1516
import { licenseAttributes } from "../utils/licenseAttributes";
1617

18+
const StyledFigure = styled(Figure, {
19+
base: {
20+
clear: "both",
21+
},
22+
});
23+
1724
interface Props {
1825
embed: AudioMetaData;
1926
lang?: string;
@@ -46,7 +53,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
4653
const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
4754

4855
return (
49-
<Figure lang={lang} data-embed-type={type} {...licenseProps}>
56+
<StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>
5057
<AudioPlayer
5158
description={data.podcastMeta?.introduction ?? ""}
5259
img={img}
@@ -64,7 +71,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
6471
type={data.audioType === "standard" ? "audio" : "podcast"}
6572
copyright={embed.data.copyright}
6673
/>
67-
</Figure>
74+
</StyledFigure>
6875
);
6976
};
7077

packages/ndla-ui/src/Embed/IframeEmbed.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ const StyledIframe = styled("iframe", {
2525
},
2626
});
2727

28+
const StyledFigure = styled(Figure, {
29+
base: {
30+
clear: "both",
31+
},
32+
});
33+
2834
const IframeEmbed = ({ embed }: Props) => {
2935
const { t } = useTranslation();
3036
const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -50,15 +56,15 @@ const IframeEmbed = ({ embed }: Props) => {
5056
const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
5157
const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" };
5258
return (
53-
<Figure data-embed-type="iframe">
59+
<StyledFigure data-embed-type="iframe">
5460
<ResourceBox
5561
image={image}
5662
title={embedData.title ?? ""}
5763
url={embedData.url}
5864
caption={embedData.caption ?? ""}
5965
buttonText={t("license.other.itemImage.ariaLabel")}
6066
/>
61-
</Figure>
67+
</StyledFigure>
6268
);
6369
}
6470

@@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => {
6975
const urlOrTitle = title || url;
7076

7177
return (
72-
<Figure data-embed-type="iframe">
78+
<StyledFigure data-embed-type="iframe">
7379
<StyledIframe
7480
ref={iframeRef}
7581
title={urlOrTitle}
@@ -80,7 +86,7 @@ const IframeEmbed = ({ embed }: Props) => {
8086
allow="fullscreen; encrypted-media"
8187
loading="lazy"
8288
/>
83-
</Figure>
89+
</StyledFigure>
8490
);
8591
};
8692

packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ const StyledSafeLink = styled(SafeLink, {
4545
},
4646
});
4747

48+
const Wrapper = styled("div", {
49+
base: {
50+
clear: "both",
51+
},
52+
});
53+
4854
const UuDisclaimerEmbed = ({ embed, children }: Props) => {
4955
if (embed.status === "error") {
5056
return null;
@@ -59,7 +65,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
5965
) : null;
6066

6167
return (
62-
<div role="region" data-embed-type="uu-disclaimer">
68+
<Wrapper role="region" data-embed-type="uu-disclaimer">
6369
<StyledMessageBox variant="warning" contentEditable={false}>
6470
<InformationLine />
6571
<Disclaimer>
@@ -68,7 +74,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
6874
</Disclaimer>
6975
</StyledMessageBox>
7076
<div data-uu-content="">{children}</div>
71-
</div>
77+
</Wrapper>
7278
);
7379
};
7480

packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const StyledSection = styled("section", {
9898
flexDirection: "column",
9999
alignItems: "center",
100100
gap: "medium",
101+
clear: "both",
101102
},
102103
});
103104

packages/primitives/src/Table.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const Table = styled(
2121
maxWidth: "100%",
2222
padding: "4xsmall",
2323
tableLayout: "fixed",
24+
clear: "both",
2425
"& > caption": {
2526
fontWeight: "bold",
2627
textAlign: "left",

0 commit comments

Comments
 (0)