isolate styles better for the display of snippet HTML

guardian · Dec 16, 2024 · 43ea0e5 · 43ea0e5
1 parent 87ed411
commit 43ea0e5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/client/fontNormaliser.ts b/client/fontNormaliser.ts
@@ -56,6 +56,8 @@ export const agateSans = agateSansFont(
 );
 export const textSans = pixelSizedFont(sourceFoundations.textSans);
 
+export const bodyFont = pixelSizedFont(sourceFoundations.body);
+
 const isAgateLoaded = () => {
   let foundAgate = false;
   document.fonts.forEach((font) => {

diff --git a/client/src/payloadDisplay.tsx b/client/src/payloadDisplay.tsx
@@ -9,6 +9,8 @@ import { TelemetryContext, PINBOARD_TELEMETRY_TYPE } from "./types/Telemetry";
 import { Tab } from "./types/Tab";
 import { FloatingClearButton } from "./floatingClearButton";
 import { MamVideoDisplay } from "./mam/mamVideoDisplay";
+import root from "react-shadow/emotion";
+import { bodyFont } from "../fontNormaliser";
 
 interface PayloadDisplayProps {
   payloadAndType: PayloadAndType;
@@ -141,21 +143,25 @@ export const PayloadDisplay = ({
             <strong>Newswires snippet:</strong>
             <blockquote
               css={css`
-                font-size: 0.8rem;
                 overflow-y: auto;
                 margin: 0;
                 padding: 0 0 0 ${space[1]}px;
                 border-left: 4px solid ${brand[800]};
                 background-color: ${neutral[100]};
                 max-height: 175px;
-                overflow-y: auto;
               `}
             >
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: safeSnippetHtml || "",
-                }}
-              />
+              <root.div>
+                <div
+                  css={css`
+                    ${bodyFont.small({ lineHeight: "tight" })};
+                    font-size: 12px;
+                  `}
+                  dangerouslySetInnerHTML={{
+                    __html: safeSnippetHtml || "",
+                  }}
+                />
+              </root.div>
             </blockquote>
           </div>
         )}