docs(PPDSC-2172): fix for applitools build issue test_visual_docs_2

newscorp-ghfb · Jun 8, 2022 · c0c20ff · c0c20ff
1 parent a872973
commit c0c20ff
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 1 deletion.
diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap
@@ -445,6 +445,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
   text-align: center;
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-25 svg {
   width: 24px;
   height: 24px;
@@ -472,6 +484,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-28 {
   margin: 0;
   font-family: "Poppins",sans-serif;
@@ -538,6 +562,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
   text-align: center;
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-30 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-30 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-30 svg {
   width: 24px;
   height: 24px;
@@ -565,6 +601,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-30 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-30 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-49 {
   grid-area: github;
 }
@@ -1629,6 +1677,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
   text-align: center;
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-25 svg {
   width: 24px;
   height: 24px;
@@ -1656,6 +1716,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-28 {
   margin: 0;
   font-family: "Poppins",sans-serif;
@@ -1722,6 +1794,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
   text-align: center;
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-30 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-30 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-30 svg {
   width: 24px;
   height: 24px;
@@ -1749,6 +1833,18 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-30 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-30 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-49 {
   grid-area: github;
 }
@@ -2807,6 +2903,18 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
   text-align: center;
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-25 svg {
   width: 24px;
   height: 24px;
@@ -2834,6 +2942,18 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .emotion-25 {
+    padding-inline: 3px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .emotion-25 {
+    padding-inline: 16px;
+  }
+}
+
 .emotion-28 {
   margin: 0;
   font-family: "Poppins",sans-serif;

diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx
@@ -124,8 +124,8 @@ const SiteHeader = React.forwardRef<HeaderRef, HeaderProps>(
           overrides={{
             stylePreset: 'linkTopNavigation',
             minHeight: '80px',
-
             marginInline: '10px',
+            paddingInline: {lg: '3px', xl: '16px'},
           }}
         >
           {title}