From a4221b487dbf448809f59298a6695e662a39ed2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Saugat=20Pachhai=20=28=E0=A4=B8=E0=A5=8C=E0=A4=97=E0=A4=BE?=
 =?UTF-8?q?=E0=A4=A4=29?= <suagatchhetri@outlook.com>
Date: Thu, 3 Sep 2026 17:19:45 +0545
Subject: [PATCH 1/3] feat: add dismissible webinar announcement

Replace the scrolling header prompt with a fixed webinar announcement that
stays aligned with the documentation navigation at every viewport size.

Persist dismissals and restore them before hydration so direct fragment
loads do not briefly show the announcement again.

Fixes: https://github.com/treeverse/dvc.org/issues/5586
---
 gatsby-ssr.js                                 |  22 ++++
 package.json                                  |   1 -
 .../Documentation/Layout/styles.module.css    |   5 +-
 .../Markdown/Tooltip/DesktopView/index.tsx    |   2 +-
 .../Documentation/RightPanel/index.tsx        |  28 ++---
 .../RightPanel/styles.module.css              |   4 +-
 src/components/LayoutHeader/Alert/content.tsx |  23 ++--
 .../LayoutHeader/Alert/index.test.tsx         |  33 ++++++
 src/components/LayoutHeader/Alert/index.tsx   |  48 ++++----
 .../LayoutHeader/Alert/state.test.ts          |  42 +++++++
 src/components/LayoutHeader/Alert/state.ts    |  12 ++
 .../LayoutHeader/Alert/styles.module.css      | 112 +++++++++++++++++-
 .../LayoutHeader/Nav/styles.module.css        |  11 +-
 src/components/LayoutHeader/index.tsx         |  32 ++---
 src/components/LayoutHeader/styles.module.css |  31 +++--
 src/components/MainLayout/index.tsx           |  20 +---
 src/gatsby/common.js                          |   7 +-
 src/templates/doc.tsx                         |   5 +-
 yarn.lock                                     |  14 ---
 19 files changed, 314 insertions(+), 138 deletions(-)
 create mode 100644 src/components/LayoutHeader/Alert/index.test.tsx
 create mode 100644 src/components/LayoutHeader/Alert/state.test.ts
 create mode 100644 src/components/LayoutHeader/Alert/state.ts

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index b38a8da620..73c48d08ea 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,4 +1,20 @@
 import { wrapPageElement } from './gatsby-shared'
+import {
+  ALERT_DISMISSED_ATTRIBUTE,
+  ALERT_DISMISSED_STORAGE_KEY
+} from './src/components/LayoutHeader/Alert/state'
+
+const alertInitScript = `
+try {
+  if (localStorage.getItem(${JSON.stringify(
+    ALERT_DISMISSED_STORAGE_KEY
+  )}) === 'true') {
+    document.body.setAttribute(${JSON.stringify(
+      ALERT_DISMISSED_ATTRIBUTE
+    )}, '');
+  }
+} catch(e) {}
+`
 
 const themeInitScript = `
 void function() {
@@ -67,6 +83,12 @@ export const onRenderBody = ({ setHeadComponents, setPreBodyComponents }) => {
     ))
   )
   setPreBodyComponents([
+    <script
+      key="layout-alert-init"
+      id="layout-alert-init"
+      data-uc-allowed="true"
+      dangerouslySetInnerHTML={{ __html: alertInitScript }}
+    />,
     <script
       key="theme-mode-init"
       id="theme-mode-init"
diff --git a/package.json b/package.json
index 2e6e94002a..cf179463e6 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "prismjs": "1.30.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "react-intersection-observer": "10.0.3",
     "rehype-parse": "9.0.1",
     "rehype-stringify": "10.0.1",
     "remark-html": "16.0.1",
diff --git a/src/components/Documentation/Layout/styles.module.css b/src/components/Documentation/Layout/styles.module.css
index 2e314c4a5c..14a6f45cd4 100644
--- a/src/components/Documentation/Layout/styles.module.css
+++ b/src/components/Documentation/Layout/styles.module.css
@@ -318,7 +318,10 @@
 }
 
 .innerSidebar {
-  @apply flex flex-col sticky top-0 max-h-screen z-20 pt-14;
+  @apply flex flex-col sticky z-20 pt-14;
+
+  top: var(--layout-alert-height);
+  max-height: calc(100vh - var(--layout-alert-height));
 }
 
 .backdrop {
diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
index eb4bfe12ac..bf98046921 100644
--- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
+++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx
@@ -20,7 +20,7 @@ const ARROW_SIZE = 10
 const VIEWPORT_PADDING = 16
 
 const getNavbarBottom = (): number => {
-  const header = document.querySelector('header[data-collapsed], #header')
+  const header = document.getElementById('header')
 
   return header?.getBoundingClientRect().bottom ?? 0
 }
diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx
index 43feac7ba6..44b2c33888 100644
--- a/src/components/Documentation/RightPanel/index.tsx
+++ b/src/components/Documentation/RightPanel/index.tsx
@@ -25,13 +25,11 @@ const RightPanel: React.FC<IRightPanelProps> = ({ headings, githubLink }) => {
     animatingRef.current = false
 
     // A heading is "active" once it passes the visible top boundary.
-    // scroll-padding-top accounts for the fixed header; the extra
-    // buffer covers scroll-margin on headings and minor spacing.
-    let baseOffset =
-      (parseInt(
-        getComputedStyle(document.documentElement).scrollPaddingTop,
-        10
-      ) || 0) + 30
+    // The extra buffer covers the anchor margin and minor spacing.
+    const getBaseOffset = (): number =>
+      (document.getElementById('header')?.getBoundingClientRect().bottom ??
+        56) + 30
+    let baseOffset = getBaseOffset()
 
     const update = (): void => {
       if (animatingRef.current) return
@@ -63,23 +61,21 @@ const RightPanel: React.FC<IRightPanelProps> = ({ headings, githubLink }) => {
         })
     }
 
-    const onResize = (): void => {
-      baseOffset =
-        (parseInt(
-          getComputedStyle(document.documentElement).scrollPaddingTop,
-          10
-        ) || 0) + 30
+    const onLayoutResize = (): void => {
+      baseOffset = getBaseOffset()
       scheduleUpdate()
     }
 
     // Detect layout shifts from <details>, images, etc. that don't
     // fire scroll or resize events but still move headings.
     const markdownRoot = document.getElementById('markdown-root')
-    const resizeObserver = new ResizeObserver(scheduleUpdate)
+    const header = document.getElementById('header')
+    const resizeObserver = new ResizeObserver(onLayoutResize)
     if (markdownRoot) resizeObserver.observe(markdownRoot)
+    if (header) resizeObserver.observe(header)
 
     document.addEventListener('scroll', scheduleUpdate, { passive: true })
-    window.addEventListener('resize', onResize, { passive: true })
+    window.addEventListener('resize', onLayoutResize, { passive: true })
     scheduleUpdateRef.current = scheduleUpdate
     rafId = requestAnimationFrame(() => {
       rafId = 0
@@ -88,7 +84,7 @@ const RightPanel: React.FC<IRightPanelProps> = ({ headings, githubLink }) => {
 
     return (): void => {
       document.removeEventListener('scroll', scheduleUpdate)
-      window.removeEventListener('resize', onResize)
+      window.removeEventListener('resize', onLayoutResize)
       resizeObserver.disconnect()
       cancelAnimationFrame(rafId)
       guardCleanupRef.current?.()
diff --git a/src/components/Documentation/RightPanel/styles.module.css b/src/components/Documentation/RightPanel/styles.module.css
index 616ef7da85..e116bfe6c9 100644
--- a/src/components/Documentation/RightPanel/styles.module.css
+++ b/src/components/Documentation/RightPanel/styles.module.css
@@ -1,9 +1,11 @@
 @reference "../../../styles/global.css";
 
 .container {
-  @apply mt-7 pt-14 sticky top-0 max-h-screen;
+  @apply mt-7 pt-14 sticky;
 
   align-self: flex-start;
+  top: var(--layout-alert-height);
+  max-height: calc(100vh - var(--layout-alert-height));
   flex-shrink: 0;
   width: 170px;
   font-size: 16px;
diff --git a/src/components/LayoutHeader/Alert/content.tsx b/src/components/LayoutHeader/Alert/content.tsx
index 8d385a16f6..cccc2a6d7e 100644
--- a/src/components/LayoutHeader/Alert/content.tsx
+++ b/src/components/LayoutHeader/Alert/content.tsx
@@ -1,14 +1,17 @@
 import Link from '../../Link'
-import { ReactComponent as GithubSVG } from '../../SocialIcon/github.svg'
+
+import * as styles from './styles.module.css'
+
+const WEBINAR_URL =
+  'https://dvc.org/webinars/end-to-end-lineage-aws-dvc-mlflow/'
 
 export const AlertContent = () => (
-  <>
-    <span role="img" aria-label="rocket">
-      🚀
-    </span>{' '}
-    <Link href="https://github.com/treeverse/dvc">
-      Star us on <GithubSVG className="h-5 w-5 inline-block align-middle" />
-    </Link>
-    !
-  </>
+  <Link className={styles.alertLink} href={WEBINAR_URL}>
+    <span className={styles.message}>
+      See how AWS built end-to-end ML lineage with DVC, SageMaker &amp; MLflow
+    </span>
+    <span className={styles.cta}>
+      Join us <time dateTime="2026-09-22">Sept. 22</time>
+    </span>
+  </Link>
 )
diff --git a/src/components/LayoutHeader/Alert/index.test.tsx b/src/components/LayoutHeader/Alert/index.test.tsx
new file mode 100644
index 0000000000..1ba006b573
--- /dev/null
+++ b/src/components/LayoutHeader/Alert/index.test.tsx
@@ -0,0 +1,33 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import LayoutAlert from './index'
+
+describe('LayoutAlert', () => {
+  it('links to the webinar registration page with the event details', () => {
+    const { container } = render(<LayoutAlert onDismiss={vi.fn()} />)
+
+    const link = screen.getByRole('link', {
+      name: /See how AWS built end-to-end ML lineage with DVC, SageMaker & MLflow/i
+    })
+    const time = container.querySelector('time')
+
+    expect(link.getAttribute('href')).toBe(
+      'https://dvc.org/webinars/end-to-end-lineage-aws-dvc-mlflow/'
+    )
+    expect(time?.getAttribute('datetime')).toBe('2026-09-22')
+    expect(link.textContent).toContain('Join us Sept. 22')
+  })
+
+  it('can be dismissed', () => {
+    const onDismiss = vi.fn()
+
+    render(<LayoutAlert onDismiss={onDismiss} />)
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Dismiss webinar announcement' })
+    )
+
+    expect(onDismiss).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/components/LayoutHeader/Alert/index.tsx b/src/components/LayoutHeader/Alert/index.tsx
index e42eb1696c..2ad3e9f643 100644
--- a/src/components/LayoutHeader/Alert/index.tsx
+++ b/src/components/LayoutHeader/Alert/index.tsx
@@ -1,30 +1,32 @@
-import cn from 'clsx/lite'
-
 import { AlertContent } from './content'
 import * as styles from './styles.module.css'
 
-const LayoutAlert: React.FC<{ collapsed?: boolean }> = ({
-  collapsed = false
-}) => (
-  <div
-    className={cn(
-      styles.alert,
-      'w-full',
-      'transition-all',
-      'ease-in-out',
-      'delay-150',
-      'whitespace-nowrap',
-      'text-center',
-      'truncate',
-      'overflow-hidden',
-      'px-2',
-      collapsed ? 'h-0' : 'h-7'
-    )}
-  >
-    <span className="align-middle">
+const LayoutAlert: React.FC<{ onDismiss: () => void }> = ({ onDismiss }) => (
+  <aside aria-label="Upcoming event" className={styles.alert}>
+    <div className={styles.inner}>
       <AlertContent />
-    </span>
-  </div>
+      <button
+        type="button"
+        className={styles.dismissButton}
+        onClick={onDismiss}
+        aria-label="Dismiss webinar announcement"
+      >
+        <svg
+          aria-hidden="true"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M3 3l10 10M13 3L3 13"
+            stroke="currentColor"
+            strokeWidth="2"
+          />
+        </svg>
+      </button>
+    </div>
+  </aside>
 )
 
 export default LayoutAlert
diff --git a/src/components/LayoutHeader/Alert/state.test.ts b/src/components/LayoutHeader/Alert/state.test.ts
new file mode 100644
index 0000000000..29be577401
--- /dev/null
+++ b/src/components/LayoutHeader/Alert/state.test.ts
@@ -0,0 +1,42 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest'
+
+import {
+  ALERT_DISMISSED_ATTRIBUTE,
+  ALERT_DISMISSED_STORAGE_KEY,
+  dismissAlert
+} from './state'
+
+describe('layout alert state', () => {
+  const setItem = vi.fn()
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: { setItem }
+    })
+  })
+
+  afterEach(() => {
+    document.body.removeAttribute(ALERT_DISMISSED_ATTRIBUTE)
+    setItem.mockClear()
+  })
+
+  afterAll(() => {
+    delete (window as { localStorage?: Storage }).localStorage
+  })
+
+  it('persists a dismissal and updates the document immediately', () => {
+    dismissAlert()
+
+    expect(document.body.hasAttribute(ALERT_DISMISSED_ATTRIBUTE)).toBe(true)
+    expect(setItem).toHaveBeenCalledWith(ALERT_DISMISSED_STORAGE_KEY, 'true')
+  })
+})
diff --git a/src/components/LayoutHeader/Alert/state.ts b/src/components/LayoutHeader/Alert/state.ts
new file mode 100644
index 0000000000..5735611fc4
--- /dev/null
+++ b/src/components/LayoutHeader/Alert/state.ts
@@ -0,0 +1,12 @@
+export const ALERT_DISMISSED_ATTRIBUTE = 'data-layout-alert-dismissed'
+export const ALERT_DISMISSED_STORAGE_KEY = 'webinar-2026-09-22-alert-dismissed'
+
+export const dismissAlert = (): void => {
+  document.body.setAttribute(ALERT_DISMISSED_ATTRIBUTE, '')
+
+  try {
+    window.localStorage.setItem(ALERT_DISMISSED_STORAGE_KEY, 'true')
+  } catch {
+    // The banner still stays dismissed for this page when storage is blocked.
+  }
+}
diff --git a/src/components/LayoutHeader/Alert/styles.module.css b/src/components/LayoutHeader/Alert/styles.module.css
index 4cf7ce9b73..db42667f63 100644
--- a/src/components/LayoutHeader/Alert/styles.module.css
+++ b/src/components/LayoutHeader/Alert/styles.module.css
@@ -1,10 +1,112 @@
 .alert {
-  background-color: #dee;
-  transition: 0.5s all;
+  width: 100%;
+  height: var(--layout-alert-height);
   overflow: hidden;
+  color: var(--text-primary);
+  background-color: color-mix(
+    in srgb,
+    var(--accent-primary) 12%,
+    var(--bg-elevated)
+  );
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--accent-primary) 22%, transparent);
+}
+
+:global(body[data-layout-alert-dismissed]) .alert {
+  display: none;
+}
+
+.inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: var(--layout-width-wide);
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+
+.alertLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 0;
+  height: 100%;
+  color: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -3px;
+  }
+
+  &:hover .cta,
+  &:focus-visible .cta {
+    color: var(--link-hover);
+    text-decoration-color: currentcolor;
+  }
+}
+
+.dismissButton {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  display: grid;
+  place-items: center;
+  width: var(--layout-alert-height);
+  height: var(--layout-alert-height);
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -3px;
+    opacity: 1;
+  }
+}
+
+.message {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cta {
+  flex-shrink: 0;
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentcolor 45%, transparent);
+  text-underline-offset: 2px;
+  transition:
+    color 0.15s ease,
+    text-decoration-color 0.15s ease;
+}
+
+@media (width <= 572px) {
+  .alertLink {
+    gap: 6px;
+    font-size: 13px;
+  }
+}
 
-  &.collapsed {
-    height: 0;
-    transform: translateY(-100%);
+@media (prefers-reduced-motion: reduce) {
+  .cta {
+    transition: none;
   }
 }
diff --git a/src/components/LayoutHeader/Nav/styles.module.css b/src/components/LayoutHeader/Nav/styles.module.css
index b78a5c4bf0..7ac5d8e079 100644
--- a/src/components/LayoutHeader/Nav/styles.module.css
+++ b/src/components/LayoutHeader/Nav/styles.module.css
@@ -26,9 +26,12 @@
     visibility: hidden;
     opacity: 0;
     padding: 8px 16px;
-    position: fixed;
+    position: absolute;
     z-index: 11;
-    inset: 56px 0 0;
+    top: 56px;
+    right: 0;
+    left: 0;
+    height: calc(100dvh - 56px - var(--layout-alert-height));
     background-color: var(--nav-mobile-bg);
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -56,7 +59,7 @@
   @media (width <= 768px) {
     display: flex;
     align-items: center;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 4px;
     height: 56px;
@@ -72,7 +75,7 @@
     align-items: center;
     gap: 2px;
     margin-left: auto;
-    position: fixed;
+    position: absolute;
     top: 0;
     right: 8px;
     height: 56px;
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index 120e9cf170..dd3e52ed15 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -1,42 +1,26 @@
 import cn from 'clsx/lite'
-import { useState, useCallback } from 'react'
-import { useInView } from 'react-intersection-observer'
+import { useCallback, useState } from 'react'
 
 import LayoutWidthContainer from '../LayoutWidthContainer'
-import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
 
+import LayoutAlert from './Alert'
+import { dismissAlert } from './Alert/state'
 import { HeaderBranding } from './HeaderBranding'
 import Nav from './Nav'
 import * as styles from './styles.module.css'
 
-const LayoutHeader: React.FC<ILayoutModifiable> = ({ modifiers }) => {
-  const { ref, inView } = useInView({ rootMargin: '20px 0px 0px 0px' })
-  const scrolled = !inView
-
+const LayoutHeader: React.FC = () => {
   const [opened, setOpened] = useState(false)
   const handleToggle = useCallback(() => setOpened(prev => !prev), [])
   const handleClose = useCallback(() => setOpened(false), [])
 
-  const hasCollapsedModifier = modifiers?.includes(LayoutModifiers.Collapsed)
-  const collapsed = opened || hasCollapsedModifier || scrolled
-
   return (
     <>
-      <div ref={ref} />
-      <header
-        id="header"
-        data-collapsed={collapsed}
-        className={cn(styles.headerContainer)}
-      >
+      <div aria-hidden="true" className={styles.alertSpacer} />
+      <header id="header" className={styles.headerContainer}>
+        <LayoutAlert onDismiss={dismissAlert} />
         <LayoutWidthContainer
-          className={cn(
-            styles.header,
-            'transition-all',
-            'ease-in-out',
-            'delay-150',
-            'py-2',
-            'px-3'
-          )}
+          className={cn(styles.header, 'py-2', 'px-3')}
           wide
         >
           <HeaderBranding onClick={handleClose} />
diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
index 28c9f04eb5..81a099a676 100644
--- a/src/components/LayoutHeader/styles.module.css
+++ b/src/components/LayoutHeader/styles.module.css
@@ -1,7 +1,18 @@
 @reference "../../styles/global.css";
 
 html {
-  @apply scroll-pt-14;
+  --layout-alert-height: 28px;
+  --layout-header-height: 56px;
+}
+
+:global(body[data-layout-alert-dismissed]) {
+  --layout-alert-height: 0px;
+}
+
+:global(body main :target) {
+  scroll-margin-top: calc(
+    var(--layout-header-height) + var(--layout-alert-height) + 20px
+  );
 }
 
 .headerContainer {
@@ -15,31 +26,27 @@ html {
   box-shadow: var(--header-shadow);
 }
 
+.alertSpacer {
+  flex: 0 0 auto;
+  width: 100%;
+  height: var(--layout-alert-height);
+}
+
 .header {
   @apply h-14;
 
   width: 100%;
   z-index: 3;
+  position: relative;
   color: var(--header-text);
   display: flex;
   flex-flow: row nowrap;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: height 0.2s linear;
-  will-change: height;
   padding: 0 24px;
 
   @media (width <= 572px) {
     padding: 0 16px;
   }
 }
-
-.gitHubAlertLink {
-  vertical-align: middle;
-  margin-left: 0.1em;
-
-  svg {
-    color: inherit;
-  }
-}
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index b8eca0d754..9ba1e9a02b 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -11,26 +11,12 @@ import SearchProvider from '../Search'
 
 import { useRedirects } from './utils'
 
-export enum LayoutModifiers {
-  Wide,
-  Collapsed,
-  HideAlert
-}
-
-export interface ILayoutModifiable {
-  modifiers?: Array<LayoutModifiers>
-}
-
-export interface ILayoutComponentProps extends ILayoutModifiable {
+export interface ILayoutComponentProps {
   className?: string
   children?: ReactNode
 }
 
-const MainLayout = ({
-  className,
-  children,
-  modifiers = []
-}: ILayoutComponentProps) => {
+const MainLayout = ({ className, children }: ILayoutComponentProps) => {
   useRedirects()
 
   useEffect(() => {
@@ -53,7 +39,7 @@ const MainLayout = ({
           'items-center'
         )}
       >
-        <LayoutHeader modifiers={modifiers} />
+        <LayoutHeader />
         <main
           className={cn(
             'w-full',
diff --git a/src/gatsby/common.js b/src/gatsby/common.js
index 9c1e249a63..f2657932c8 100644
--- a/src/gatsby/common.js
+++ b/src/gatsby/common.js
@@ -2,8 +2,6 @@ const is404Regexp = /^\/404/
 const isDocsRegexp = /^\/doc/
 const trailingSlashRegexp = /\/$/
 
-const alertLandingArray = ['/enterprise']
-
 let markdownProcessor
 const getMarkdownProcessor = async () => {
   if (!markdownProcessor) {
@@ -29,8 +27,6 @@ const setPageContext = (page, actions) =>
         ? pPath.replace(trailingSlashRegexp, '')
         : pPath
 
-    const isAlertLanding = alertLandingArray.includes(pagePath)
-
     actions.deletePage(page)
     actions.createPage({
       ...page,
@@ -38,8 +34,7 @@ const setPageContext = (page, actions) =>
       context: {
         ...page.context,
         is404: is404Regexp.test(page.path),
-        isDocs: isDocsRegexp.test(page.path),
-        isAlertLanding
+        isDocs: isDocsRegexp.test(page.path)
       }
     })
     resolve()
diff --git a/src/templates/doc.tsx b/src/templates/doc.tsx
index d86fc4156b..66f10ab5bb 100644
--- a/src/templates/doc.tsx
+++ b/src/templates/doc.tsx
@@ -3,7 +3,7 @@ import { Element } from 'hast'
 
 import Documentation from '../components/Documentation'
 import DocumentationLayout from '../components/Documentation/Layout'
-import MainLayout, { LayoutModifiers } from '../components/MainLayout'
+import MainLayout from '../components/MainLayout'
 import SEO from '../components/SEO'
 import { getItemByPath } from '../utils/shared/sidebar'
 
@@ -22,7 +22,6 @@ const DocPage: React.FC<
       slug: string
       headings: []
       is404: boolean
-      isAlertLanding: boolean
       pageInfo?: {
         currentPage: number
         nextPage?: string
@@ -39,7 +38,7 @@ const DocPage: React.FC<
   } = data
 
   return (
-    <MainLayout modifiers={[LayoutModifiers.Wide, LayoutModifiers.Collapsed]}>
+    <MainLayout>
       <DocumentationLayout currentPath={pathname}>
         <Documentation htmlAst={htmlAst} path={pathname} headings={headings} />
       </DocumentationLayout>
diff --git a/yarn.lock b/yarn.lock
index 5fd3877307..4dd51999d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16216,19 +16216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-intersection-observer@npm:10.0.3":
-  version: 10.0.3
-  resolution: "react-intersection-observer@npm:10.0.3"
-  peerDependencies:
-    react: ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    react-dom:
-      optional: true
-  checksum: 10c0/64439d19793c49bf9d1701fc74cd854f4ddc646411500a4d1efa058ac0100efdde5d4dd24ce736a48eeba9de3585c164c916be2b91e9c9b2b5db7b756c8cec9d
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -20097,7 +20084,6 @@ __metadata:
     prismjs: "npm:1.30.0"
     react: "npm:19.2.4"
     react-dom: "npm:19.2.4"
-    react-intersection-observer: "npm:10.0.3"
     rehype-parse: "npm:9.0.1"
     rehype-stringify: "npm:10.0.1"
     remark: "npm:15.0.1"

From 2a2278ba457d74e6f47dcdb71d6267d036781bf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Saugat=20Pachhai=20=28=E0=A4=B8=E0=A5=8C=E0=A4=97=E0=A4=BE?=
 =?UTF-8?q?=E0=A4=A4=29?= <suagatchhetri@outlook.com>
Date: Thu, 3 Sep 2026 18:10:06 +0545
Subject: [PATCH 2/3] style: make webinar banner more prominent

Increase the banner height and type size, and use the DVC purple callout
tint so the announcement stands apart from the surrounding site chrome.
Keep the CTA legible and truncate it safely on narrow screens.
---
 .../LayoutHeader/Alert/styles.module.css      | 19 +++++++++++--------
 src/components/LayoutHeader/styles.module.css |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/LayoutHeader/Alert/styles.module.css b/src/components/LayoutHeader/Alert/styles.module.css
index db42667f63..49dd42c79e 100644
--- a/src/components/LayoutHeader/Alert/styles.module.css
+++ b/src/components/LayoutHeader/Alert/styles.module.css
@@ -5,11 +5,11 @@
   color: var(--text-primary);
   background-color: color-mix(
     in srgb,
-    var(--accent-primary) 12%,
+    var(--accent-secondary) 8%,
     var(--bg-elevated)
   );
   border-bottom: 1px solid
-    color-mix(in srgb, var(--accent-primary) 22%, transparent);
+    color-mix(in srgb, var(--accent-secondary) 22%, transparent);
 }
 
 :global(body[data-layout-alert-dismissed]) .alert {
@@ -25,7 +25,7 @@
   max-width: var(--layout-width-wide);
   height: 100%;
   margin: 0 auto;
-  padding: 0 40px;
+  padding: 0 calc(var(--layout-alert-height) + 12px);
 }
 
 .alertLink {
@@ -36,8 +36,8 @@
   min-width: 0;
   height: 100%;
   color: inherit;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 16px;
+  line-height: 24px;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
@@ -49,7 +49,6 @@
 
   &:hover .cta,
   &:focus-visible .cta {
-    color: var(--link-hover);
     text-decoration-color: currentcolor;
   }
 }
@@ -88,8 +87,11 @@
 
 .cta {
   flex-shrink: 0;
-  color: var(--link);
+  max-width: calc(100% - 8px);
+  overflow: hidden;
+  color: var(--link-hover);
   font-weight: 600;
+  text-overflow: ellipsis;
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, currentcolor 45%, transparent);
   text-underline-offset: 2px;
@@ -101,7 +103,8 @@
 @media (width <= 572px) {
   .alertLink {
     gap: 6px;
-    font-size: 13px;
+    font-size: 14px;
+    line-height: 20px;
   }
 }
 
diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
index 81a099a676..ccc4838ca7 100644
--- a/src/components/LayoutHeader/styles.module.css
+++ b/src/components/LayoutHeader/styles.module.css
@@ -1,7 +1,7 @@
 @reference "../../styles/global.css";
 
 html {
-  --layout-alert-height: 28px;
+  --layout-alert-height: 40px;
   --layout-header-height: 56px;
 }
 

From 4dc784cac88475df87c797076689126db2f4a834 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Saugat=20Pachhai=20=28=E0=A4=B8=E0=A5=8C=E0=A4=97=E0=A4=BE?=
 =?UTF-8?q?=E0=A4=A4=29?= <suagatchhetri@outlook.com>
Date: Thu, 3 Sep 2026 18:35:01 +0545
Subject: [PATCH 3/3] style: keep webinar banner readable on mobile

Wrap the announcement and place its CTA on a separate line at mobile
widths. Increase the banner height only as the viewport narrows so the
complete message and 44px dismiss target remain visible down to 240px.
---
 .../LayoutHeader/Alert/styles.module.css      | 33 ++++++++++++++++++-
 src/components/LayoutHeader/styles.module.css | 18 ++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/components/LayoutHeader/Alert/styles.module.css b/src/components/LayoutHeader/Alert/styles.module.css
index 49dd42c79e..6a16760482 100644
--- a/src/components/LayoutHeader/Alert/styles.module.css
+++ b/src/components/LayoutHeader/Alert/styles.module.css
@@ -101,10 +101,41 @@
 }
 
 @media (width <= 572px) {
+  .inner {
+    padding: 4px 52px;
+  }
+
   .alertLink {
+    display: block;
     gap: 6px;
-    font-size: 14px;
+    min-height: 44px;
+    height: auto;
+    padding: 2px 0;
+    font-size: 15px;
     line-height: 20px;
+    white-space: normal;
+  }
+
+  .dismissButton {
+    top: 50%;
+    right: 4px;
+    width: 44px;
+    height: 44px;
+    transform: translateY(-50%);
+  }
+
+  .message {
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  .cta {
+    display: block;
+    max-width: none;
+    overflow: visible;
+    margin-left: 0;
+    text-overflow: clip;
+    white-space: nowrap;
   }
 }
 
diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
index ccc4838ca7..798cbb2a0e 100644
--- a/src/components/LayoutHeader/styles.module.css
+++ b/src/components/LayoutHeader/styles.module.css
@@ -5,6 +5,24 @@ html {
   --layout-header-height: 56px;
 }
 
+@media (width <= 572px) {
+  html {
+    --layout-alert-height: 72px;
+  }
+}
+
+@media (width <= 340px) {
+  html {
+    --layout-alert-height: 92px;
+  }
+}
+
+@media (width <= 280px) {
+  html {
+    --layout-alert-height: 112px;
+  }
+}
+
 :global(body[data-layout-alert-dismissed]) {
   --layout-alert-height: 0px;
 }