Release note sticky fixes (github#23643)

0292568684 · Dec 13, 2021 · 821c1e6 · 821c1e6
1 parent 64957b7
commit 821c1e6
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/components/release-notes/GHAEReleaseNotePatch.tsx b/components/release-notes/GHAEReleaseNotePatch.tsx
@@ -26,7 +26,7 @@ export function GHAEReleaseNotePatch({ patch, didEnterView }: Props) {
     >
       <header
         style={{ zIndex: 1 }}
-        className="container-xl position-sticky top-0 color-bg-subtle border-bottom px-3 pt-4 pb-2"
+        className="container-xl color-bg-subtle border-bottom px-3 pt-4 pb-2"
       >
         <div className="d-flex flex-items-center">
           <h2 className="border-bottom-0 m-0 p-0">{patch.title}</h2>

diff --git a/components/release-notes/GHAEReleaseNotes.tsx b/components/release-notes/GHAEReleaseNotes.tsx
@@ -5,6 +5,8 @@ import { GHAEReleaseNotePatch } from './GHAEReleaseNotePatch'
 import { GHAEReleaseNotesContextT } from './types'
 import { MarkdownContent } from 'components/ui/MarkdownContent'
 
+import styles from './PatchNotes.module.scss'
+
 type GitHubAEProps = {
   context: GHAEReleaseNotesContextT
 }
@@ -35,8 +37,10 @@ export function GHAEReleaseNotes({ context }: GitHubAEProps) {
       </article>
 
       <aside
-        className="position-sticky top-0 d-none d-md-block border-left no-print color-bg-default flex-shrink-0"
-        style={{ width: 260, height: '100vh' }}
+        className={cx(
+          'position-sticky d-none d-md-block border-left no-print color-bg-default flex-shrink-0',
+          styles.aside
+        )}
       >
         <nav className="height-full overflow-auto">
           <MarkdownContent data-search="article-content">

diff --git a/components/release-notes/GHESReleaseNotePatch.tsx b/components/release-notes/GHESReleaseNotePatch.tsx
@@ -40,7 +40,7 @@ export function GHESReleaseNotePatch({
     >
       <header
         style={{ zIndex: 1 }}
-        className="container-xl position-sticky top-0 color-bg-subtle border-bottom px-3 pt-4 pb-2"
+        className="container-xl color-bg-subtle border-bottom px-3 pt-4 pb-2"
       >
         <div className="d-flex flex-items-center">
           <h2 className="border-bottom-0 m-0 p-0">

diff --git a/components/release-notes/GHESReleaseNotes.tsx b/components/release-notes/GHESReleaseNotes.tsx
@@ -15,6 +15,8 @@ import { MarkdownContent } from 'components/ui/MarkdownContent'
 import { GHESReleaseNotesContextT } from './types'
 import { GHESReleaseNotePatch } from './GHESReleaseNotePatch'
 
+import styles from './PatchNotes.module.scss'
+
 type Props = {
   context: GHESReleaseNotesContextT
 }
@@ -82,8 +84,10 @@ export function GHESReleaseNotes({ context }: Props) {
       </article>
 
       <aside
-        className="position-sticky top-0 d-none d-md-block border-left no-print color-bg-default flex-shrink-0"
-        style={{ width: 260, height: '100vh' }}
+        className={cx(
+          'position-sticky d-none d-md-block border-left no-print color-bg-default flex-shrink-0',
+          styles.aside
+        )}
       >
         <nav className="height-full overflow-auto">
           <MarkdownContent data-search="article-content">

diff --git a/components/release-notes/PatchNotes.module.scss b/components/release-notes/PatchNotes.module.scss
@@ -1,8 +1,11 @@
 @import "@primer/css/layout/index.scss";
 
 .sectionHeading {
-  scroll-margin-top: 280px !important;
-  @include breakpoint(sm) {
-    scroll-margin-top: 200px !important;
-  }
+  scroll-margin-top: 70px !important;
+}
+
+.aside {
+  width: 260px;
+  height: calc(100vh - 70px);
+  top: 70px;
 }