Fix style leak in KeyInsights (#4615)

We were overriding `h4` and `p` style in Grapher download modal.
owid · Mar 4, 2025 · 3c88d95 · 3c88d95
1 parent 075857a
commit 3c88d95
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/site/gdocs/components/KeyInsights.scss b/site/gdocs/components/KeyInsights.scss
@@ -143,14 +143,16 @@ $slide-content-height: $grapher-height;
         &[data-active="true"] {
             display: block;
         }
+    }
+}
 
-        h4 {
-            @include h2-bold;
-            margin: 0 0 $vertical-spacing;
-        }
+.key-insights-title {
+    @include h2-bold;
+    margin: 0 0 $vertical-spacing;
+}
 
-        p {
-            @include body-2-regular;
-        }
+.article-block__key-insights-content-column {
+    p {
+        @include body-2-regular;
     }
 }
diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
@@ -374,7 +374,10 @@ export const KeyInsights = ({
                                     >
                                         <div className="grid span-cols-12">
                                             <div className="article-block__key-insights-content-column span-cols-5 span-md-cols-12">
-                                                <h4 id={slugify(title)}>
+                                                <h4
+                                                    id={slugify(title)}
+                                                    className="key-insights-title"
+                                                >
                                                     {title}
                                                 </h4>
                                                 <div