From 43ea0e5c6ae56c4e55e1813ba9058b86d2800cd6 Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Mon, 16 Dec 2024 17:18:03 +0000
Subject: [PATCH] isolate styles better for the display of snippet HTML

---
 client/fontNormaliser.ts      |  2 ++
 client/src/payloadDisplay.tsx | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/fontNormaliser.ts b/client/fontNormaliser.ts
index 26b3451c..90321ee7 100644
--- 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
index 07632732..d91e4d20 100644
--- 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>
         )}