Updated sticky header logic.

components/common/StickyHeader.js

@@ -1,32 +0,0 @@
-import { useMeasure } from 'react-basics';
-import classNames from 'classnames';
-import useSticky from 'hooks/useSticky';
-
-export default function StickyHeader({
-  className,
-  stickyClassName,
-  stickyStyle,
-  enabled = true,
-  scrollElement,
-  children,
-}) {
-  const { ref: scrollRef, isSticky } = useSticky({ scrollElement });
-  const { ref: measureRef, dimensions } = useMeasure();
-  const active = enabled && isSticky;
-
-  return (
-    <div
-      ref={measureRef}
-      data-sticky={active}
-      style={active ? { height: dimensions.height } : null}
-    >
-      <div
-        ref={scrollRef}
-        className={classNames(className, { [stickyClassName]: active })}
-        style={active ? { ...stickyStyle, width: dimensions.width } : null}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

components/metrics/WebsiteChart.js

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { Button, Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
+import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/input/DateFilter';
-import StickyHeader from 'components/common/StickyHeader';
 import ErrorMessage from 'components/common/ErrorMessage';
 import FilterTags from 'components/metrics/FilterTags';
 import RefreshButton from 'components/input/RefreshButton';
@@ -16,9 +16,9 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
 import Icons from 'components/icons';
-import { UI_LAYOUT_BODY } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './WebsiteChart.module.css';
+import useSticky from '../../hooks/useSticky';
 
 export default function WebsiteChart({
   websiteId,
@@ -37,6 +37,7 @@ export default function WebsiteChart({
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
   const { get, useQuery } = useApi();
+  const { ref, isSticky } = useSticky({ enabled: stickyHeader });
 
   const { data, isLoading, error } = useQuery(
     ['websites:pageviews', websiteId, modified, url, referrer, os, browser, device, country],
@@ -81,21 +82,21 @@ export default function WebsiteChart({
         )}
       </WebsiteHeader>
       <FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
-      <StickyHeader
-        stickyClassName={styles.sticky}
-        enabled={stickyHeader}
-        scrollElement={document.getElementById(UI_LAYOUT_BODY)}
+      <Row
+        ref={ref}
+        className={classNames(styles.header, {
+          [styles.sticky]: stickyHeader,
+          [styles.isSticky]: isSticky,
+        })}
       >
-        <Row className={styles.header}>
-          <Column>
-            <MetricsBar websiteId={websiteId} />
-          </Column>
-          <Column className={styles.actions}>
-            <RefreshButton websiteId={websiteId} isLoading={isLoading} />
-            <DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
-          </Column>
-        </Row>
-      </StickyHeader>
+        <Column>
+          <MetricsBar websiteId={websiteId} />
+        </Column>
+        <Column className={styles.actions}>
+          <RefreshButton websiteId={websiteId} isLoading={isLoading} />
+          <DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
+        </Column>
+      </Row>
       <Row>
         <Column className={styles.chart}>
           {error && <ErrorMessage />}

components/metrics/WebsiteChart.module.css

@@ -17,22 +17,23 @@
 }
 
 .header {
-  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 10px 0;
   min-height: 90px;
   margin-bottom: 20px;
+  background: var(--base50);
 }
 
 .sticky {
-  position: fixed;
-  top: 0;
-  background: var(--base50);
+  position: sticky;
+  top: -1px;
+  z-index: 2;
+}
+
+.isSticky {
   border-bottom: 1px solid var(--base300);
-  z-index: 3;
-  width: inherit;
-  padding-top: 10px;
 }
 
 .actions {

components/pages/realtime/RealtimeDashboard.js

@@ -6,7 +6,6 @@ import firstBy from 'thenby';
 import { GridRow, GridColumn } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
-import StickyHeader from 'components/common/StickyHeader';
 import PageHeader from 'components/layout/PageHeader';
 import WorldMap from 'components/common/WorldMap';
 import RealtimeLog from 'components/pages/realtime/RealtimeLog';
@@ -104,9 +103,7 @@ export default function RealtimeDashboard({ websiteId }) {
       <PageHeader title={formatMessage(labels.realtime)}>
         <WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
       </PageHeader>
-      <StickyHeader stickyClassName={styles.sticky}>
-        <RealtimeHeader websiteId={websiteId} data={currentData} />
-      </StickyHeader>
+      <RealtimeHeader websiteId={websiteId} data={currentData} />
       <div className={styles.chart}>
         <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>