Fix SubNav layout shift Safari bug (#1072)

* fix layout shift

* style tweak

* update snapshots

* add changeset

* visual alignment

* remove comment

Author: joshfarrant

.changeset/clean-cobras-knock.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed a bug in the `SubNav` component where the separator could appear on a new line during initial render in Safari.

packages/react/src/SubNav/SubNav.module.css

@@ -536,13 +536,23 @@
     display: none;
   }
 
+  .SubNav__container--with-anchor-nav .SubNav__heading {
+    padding-block-end: 1px;
+  }
+
   .SubNav__heading {
     font-size: calc(var(--base-size-20) - 2px);
     line-height: var(--base-size-24);
   }
 
   .SubNav__heading-separator {
     margin-inline-end: var(--base-size-20);
+    display: inline-flex;
+    top: 0;
+  }
+
+  .SubNav__container--with-anchor-nav .SubNav__heading-separator {
+    top: -1px;
   }
 
   .SubNav--header-container-outer {
@@ -554,6 +564,11 @@
     margin-inline-end: var(--base-size-20);
   }
 
+  .SubNav__header-container {
+    display: flex;
+    align-items: center;
+  }
+
   .SubNav__subHeading {
     font-size: var(--brand-text-size-100);
     line-height: var(--brand-text-lineHeight-100);