content/static: sticky-header bug fix

Fixes a bug in the header were some interactive items
at the top of the page below the header would become
unclickable.

Change-Id: Ic0c7f2e9149767c822f6f6ea3f1b9591cd60053e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/307355
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index ca394e9..d419847 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -7,7 +7,7 @@
 .UnitHeader {
   min-height: calc(var(--full-header-height));
   position: sticky;
-  top: calc(var(--breadcrumbs-height) * -1);
+  top: calc(var(--full-header-height) * -1 + var(--banner-height) + var(--header-height));
   white-space: nowrap;
   z-index: 100;
 }
@@ -31,6 +31,8 @@
 .UnitHeader-content {
   background-color: var(--white);
   border-bottom: 0.0625rem solid var(--gray-8);
+  position: sticky;
+  top: var(--banner-height);
 }
 .UnitHeader-content > div {
   display: flex;
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
index c31c690..fc60780 100644
--- a/content/static/js/unit.js
+++ b/content/static/js/unit.js
@@ -3,5 +3,5 @@
  * Copyright 2021 The Go Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
- */import{CopyToClipboardController as p}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as y}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new y(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new p(e)});const t=document.querySelector(".js-readme"),d=document.querySelector(".js-readmeContent"),l=document.querySelector(".js-readmeOutline"),o=document.querySelectorAll(".js-readmeExpand"),s=document.querySelector(".js-readmeCollapse");t&&d&&l&&o.length&&s&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),o.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),s.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),o[1]&&o[1].scrollIntoView({block:"center"})}),d.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),d.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),l.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const i=document.querySelector(".js-readmeOption");i&&!t&&i.setAttribute("disabled","true");const h=document.querySelector(".js-unitDirectories"),a=document.querySelector(".js-directoriesOption");!h&&a&&a.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const n=document.querySelector(".js-unitHeader");n?.addEventListener("dblclick",e=>{e.target===n.firstElementChild&&n.classList.contains("UnitHeader--sticky")&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0}))});const c=document.querySelector(".UnitHeader"),E=c?.querySelector(".UnitHeader-breadcrumbs"),L=c?.querySelector(".UnitHeader-content"),m=()=>{document.documentElement.style.removeProperty("--full-header-height"),document.documentElement.style.setProperty("--full-header-height",`${(c?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--banner-height","0rem"),document.documentElement.style.setProperty("--breadcrumbs-height",`${(E?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--content-height",`${(L?.getBoundingClientRect().height??0)/16}rem`)};m(),window.addEventListener("resize",function(){m()});const b=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(n?.classList.add("UnitHeader--sticky"),n?.classList.remove("UnitHeader--full")):(n?.classList.remove("UnitHeader--sticky"),n?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"-20px"}),u=document.querySelector(".js-headerSentinel");u&&b.observe(u);
+ */import{CopyToClipboardController as p}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as y}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new y(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new p(e)});const t=document.querySelector(".js-readme"),d=document.querySelector(".js-readmeContent"),l=document.querySelector(".js-readmeOutline"),o=document.querySelectorAll(".js-readmeExpand"),s=document.querySelector(".js-readmeCollapse");t&&d&&l&&o.length&&s&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),o.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),s.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),o[1]&&o[1].scrollIntoView({block:"center"})}),d.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),d.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),l.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const i=document.querySelector(".js-readmeOption");i&&!t&&i.setAttribute("disabled","true");const h=document.querySelector(".js-unitDirectories"),a=document.querySelector(".js-directoriesOption");!h&&a&&a.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const n=document.querySelector(".js-unitHeader");n?.addEventListener("dblclick",e=>{e.target===n.firstElementChild&&n.classList.contains("UnitHeader--sticky")&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0}))});const c=document.querySelector(".UnitHeader"),E=c?.querySelector(".UnitHeader-breadcrumbs"),L=c?.querySelector(".UnitHeader-content"),m=()=>{document.documentElement.style.removeProperty("--full-header-height"),document.documentElement.style.setProperty("--full-header-height",`${(c?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--banner-height","0rem"),document.documentElement.style.setProperty("--breadcrumbs-height",`${(E?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--content-height",`${(L?.getBoundingClientRect().height??0)/16}rem`)};m(),window.addEventListener("resize",function(){m()});const b=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(n?.classList.add("UnitHeader--sticky"),n?.classList.remove("UnitHeader--full")):(n?.classList.remove("UnitHeader--sticky"),n?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"40px"}),u=document.querySelector(".js-headerSentinel");u&&b.observe(u);
 //# sourceMappingURL=unit.js.map
diff --git a/content/static/js/unit.js.map b/content/static/js/unit.js.map
index 5cb6150..6c52a6d 100644
--- a/content/static/js/unit.js.map
+++ b/content/static/js/unit.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["unit.ts"],
-  "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n  .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n  .forEach(\n    el =>\n      new ExpandableRowsTableController(\n        el,\n        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n      )\n  );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n  new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n  if (window.location.hash.includes('readme')) {\n    readme.classList.add('UnitReadme--expanded');\n  }\n  readmeExpand.forEach(el =>\n    el.addEventListener('click', e => {\n      e.preventDefault();\n      readme.classList.add('UnitReadme--expanded');\n      readme.scrollIntoView();\n    })\n  );\n  readmeCollapse.addEventListener('click', e => {\n    e.preventDefault();\n    readme.classList.remove('UnitReadme--expanded');\n    if (readmeExpand[1]) {\n      readmeExpand[1].scrollIntoView({ block: 'center' });\n    }\n  });\n  readmeContent.addEventListener('keyup', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeContent.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeOutline.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  document.addEventListener('keydown', e => {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n  readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n  directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n  el.addEventListener('change', e => {\n    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n  });\n});\n\n/**\n * Adds double click event listener to the header that will\n * scroll the page back to the top.\n */\nconst unitHeader = document.querySelector('.js-unitHeader');\nunitHeader?.addEventListener('dblclick', e => {\n  const target = e.target as HTMLElement;\n  if (\n    target === unitHeader.firstElementChild &&\n    unitHeader.classList.contains('UnitHeader--sticky')\n  ) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0 });\n  }\n});\n\n/**\n * Calculates dynamic heights values for header elements to support\n * variable size sticky positioned elements in the header so that banners\n * and breadcumbs may overflow to multiple lines.\n */\nconst header = document.querySelector<HTMLElement>('.UnitHeader');\nconst breadcrumbs = header?.querySelector<HTMLElement>('.UnitHeader-breadcrumbs');\nconst content = header?.querySelector<HTMLElement>('.UnitHeader-content');\nconst calcSize = () => {\n  document.documentElement.style.removeProperty('--full-header-height');\n  document.documentElement.style.setProperty(\n    '--full-header-height',\n    `${(header?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty('--banner-height', `0rem`);\n  document.documentElement.style.setProperty(\n    '--breadcrumbs-height',\n    `${(breadcrumbs?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty(\n    '--content-height',\n    `${(content?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n};\ncalcSize();\nwindow.addEventListener('resize', function () {\n  calcSize();\n});\n\n/**\n * Observer for header that applies classnames to transition\n * header elements into their sticky position and back into the\n * full size position.\n */\nconst observer = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      unitHeader?.classList.add('UnitHeader--sticky');\n      unitHeader?.classList.remove('UnitHeader--full');\n    } else {\n      unitHeader?.classList.remove('UnitHeader--sticky');\n      unitHeader?.classList.add('UnitHeader--full');\n    }\n  },\n  { threshold: 1.0, rootMargin: '-20px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n  observer.observe(headerSentinel);\n}\n"],
-  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAQtE,KAAM,GAAa,SAAS,cAAc,kBAC1C,GAAY,iBAAiB,WAAY,GAAK,CAE5C,AACE,AAFa,EAAE,SAEJ,EAAW,mBACtB,EAAW,UAAU,SAAS,uBAE9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,OAS3B,KAAM,GAAS,SAAS,cAA2B,eAC7C,EAAc,GAAQ,cAA2B,2BACjD,EAAU,GAAQ,cAA2B,uBAC7C,EAAW,IAAM,CACrB,SAAS,gBAAgB,MAAM,eAAe,wBAC9C,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAQ,wBAAwB,QAAU,GAAK,SAErD,SAAS,gBAAgB,MAAM,YAAY,kBAAmB,QAC9D,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAa,wBAAwB,QAAU,GAAK,SAE1D,SAAS,gBAAgB,MAAM,YAC7B,mBACA,GAAI,IAAS,wBAAwB,QAAU,GAAK,UAGxD,IACA,OAAO,iBAAiB,SAAU,UAAY,CAC5C,MAQF,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,IAAY,UAAU,IAAI,sBAC1B,GAAY,UAAU,OAAO,qBAE7B,IAAY,UAAU,OAAO,sBAC7B,GAAY,UAAU,IAAI,sBAG9B,CAAE,UAAW,EAAK,WAAY,UAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
+  "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n  .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n  .forEach(\n    el =>\n      new ExpandableRowsTableController(\n        el,\n        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n      )\n  );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n  new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n  if (window.location.hash.includes('readme')) {\n    readme.classList.add('UnitReadme--expanded');\n  }\n  readmeExpand.forEach(el =>\n    el.addEventListener('click', e => {\n      e.preventDefault();\n      readme.classList.add('UnitReadme--expanded');\n      readme.scrollIntoView();\n    })\n  );\n  readmeCollapse.addEventListener('click', e => {\n    e.preventDefault();\n    readme.classList.remove('UnitReadme--expanded');\n    if (readmeExpand[1]) {\n      readmeExpand[1].scrollIntoView({ block: 'center' });\n    }\n  });\n  readmeContent.addEventListener('keyup', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeContent.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeOutline.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  document.addEventListener('keydown', e => {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n  readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n  directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n  el.addEventListener('change', e => {\n    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n  });\n});\n\n/**\n * Adds double click event listener to the header that will\n * scroll the page back to the top.\n */\nconst unitHeader = document.querySelector('.js-unitHeader');\nunitHeader?.addEventListener('dblclick', e => {\n  const target = e.target as HTMLElement;\n  if (\n    target === unitHeader.firstElementChild &&\n    unitHeader.classList.contains('UnitHeader--sticky')\n  ) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0 });\n  }\n});\n\n/**\n * Calculates dynamic heights values for header elements to support\n * variable size sticky positioned elements in the header so that banners\n * and breadcumbs may overflow to multiple lines.\n */\nconst header = document.querySelector<HTMLElement>('.UnitHeader');\nconst breadcrumbs = header?.querySelector<HTMLElement>('.UnitHeader-breadcrumbs');\nconst content = header?.querySelector<HTMLElement>('.UnitHeader-content');\nconst calcSize = () => {\n  document.documentElement.style.removeProperty('--full-header-height');\n  document.documentElement.style.setProperty(\n    '--full-header-height',\n    `${(header?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty('--banner-height', `0rem`);\n  document.documentElement.style.setProperty(\n    '--breadcrumbs-height',\n    `${(breadcrumbs?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty(\n    '--content-height',\n    `${(content?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n};\ncalcSize();\nwindow.addEventListener('resize', function () {\n  calcSize();\n});\n\n/**\n * Observer for header that applies classnames to transition\n * header elements into their sticky position and back into the\n * full size position.\n */\nconst observer = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      unitHeader?.classList.add('UnitHeader--sticky');\n      unitHeader?.classList.remove('UnitHeader--full');\n    } else {\n      unitHeader?.classList.remove('UnitHeader--sticky');\n      unitHeader?.classList.add('UnitHeader--full');\n    }\n  },\n  { threshold: 1.0, rootMargin: '40px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n  observer.observe(headerSentinel);\n}\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAQtE,KAAM,GAAa,SAAS,cAAc,kBAC1C,GAAY,iBAAiB,WAAY,GAAK,CAE5C,AACE,AAFa,EAAE,SAEJ,EAAW,mBACtB,EAAW,UAAU,SAAS,uBAE9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,OAS3B,KAAM,GAAS,SAAS,cAA2B,eAC7C,EAAc,GAAQ,cAA2B,2BACjD,EAAU,GAAQ,cAA2B,uBAC7C,EAAW,IAAM,CACrB,SAAS,gBAAgB,MAAM,eAAe,wBAC9C,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAQ,wBAAwB,QAAU,GAAK,SAErD,SAAS,gBAAgB,MAAM,YAAY,kBAAmB,QAC9D,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAa,wBAAwB,QAAU,GAAK,SAE1D,SAAS,gBAAgB,MAAM,YAC7B,mBACA,GAAI,IAAS,wBAAwB,QAAU,GAAK,UAGxD,IACA,OAAO,iBAAiB,SAAU,UAAY,CAC5C,MAQF,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,IAAY,UAAU,IAAI,sBAC1B,GAAY,UAAU,OAAO,qBAE7B,IAAY,UAAU,OAAO,sBAC7B,GAAY,UAAU,IAAI,sBAG9B,CAAE,UAAW,EAAK,WAAY,SAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
   "names": []
 }
diff --git a/content/static/js/unit.ts b/content/static/js/unit.ts
index fee5e91..9e8e5a6 100644
--- a/content/static/js/unit.ts
+++ b/content/static/js/unit.ts
@@ -147,7 +147,7 @@
       unitHeader?.classList.add('UnitHeader--full');
     }
   },
-  { threshold: 1.0, rootMargin: '-20px' }
+  { threshold: 1.0, rootMargin: '40px' }
 );
 
 const headerSentinel = document.querySelector('.js-headerSentinel');