Polish sticky Header implementation

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Header/Header.module.css

@@ -116,8 +116,10 @@
   .bui-HeaderTitleStack {
     position: relative;
     flex: 1 1 auto;
-    height: calc(var(--bui-font-size-6) * 1.4);
+    height: 1lh;
     min-width: 0;
+    font-size: var(--bui-font-size-6);
+    line-height: 140%;
     overflow: hidden;
   }
 
@@ -151,13 +153,13 @@
     overflow: hidden;
     font-family: var(--bui-font-regular);
     font-weight: var(--bui-font-weight-bold);
-    line-height: 140%;
+    line-height: inherit;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink {
-    font-size: var(--bui-font-size-6);
+    font-size: inherit;
   }
 
   .bui-HeaderBreadcrumbsSmall .bui-HeaderBreadcrumbLinkSmall {
@@ -176,14 +178,14 @@
     min-width: 0;
     font-family: var(--bui-font-regular);
     font-weight: var(--bui-font-weight-bold);
-    line-height: 140%;
+    line-height: inherit;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .bui-HeaderTitle {
-    font-size: var(--bui-font-size-6);
+    font-size: inherit;
   }
 
   .bui-HeaderTitleSmall {

packages/ui/src/components/Header/Header.tsx

@@ -29,9 +29,11 @@ const getScrollParent = (element: HTMLElement | null): Element | null => {
   let parent = element?.parentElement;
 
   while (parent) {
-    const { overflowY } = window.getComputedStyle(parent);
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
 
-    if (/(auto|scroll|overlay)/.test(overflowY)) {
+    if (
+      /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)
+    ) {
       return parent;
     }
 
@@ -85,6 +87,8 @@ export const Header = (props: HeaderProps) => {
     () => (description ? renderInlineMarkdown(description) : null),
     [description],
   );
+  // The sentinel sits directly before the sticky content and leaves the
+  // viewport when the content becomes stuck, letting us toggle stuck styling.
   const stickySentinelRef = useRef<HTMLDivElement>(null);
   const [isStuck, setIsStuck] = useState(false);