From 3d43828ac0491341615f6aa8abdc8d62603c2773 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Wed, 25 Jun 2025 00:02:37 +0500
Subject: [PATCH] Fixed top banner overlap issue

---
 src/components/Layout.tsx    | 138 ++++++++++++++++-------------------
 src/components/TopBanner.tsx |   2 +-
 2 files changed, 65 insertions(+), 75 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 69c7847e9..402ab0687 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react';
 import { LogoMark } from './LogoMark';
 import { Search } from './search/Search';
 import VersionSelector from './VersionSelector';
+import { TopBanner } from './TopBanner';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -24,6 +25,10 @@ function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 function Header() {
 	let [isScrolled, setIsScrolled] = useState(false);
 
+	const pathname = usePathname();
+	const isCodyDocs = pathname.includes('/cody');
+	const isopenCtxDocs = pathname.includes('/cody/capabilities/openctx');
+
 	useEffect(() => {
 		function onScroll() {
 			setIsScrolled(window.scrollY > 0);
@@ -37,87 +42,17 @@ function Header() {
 
 	return (
 		<header
-			className={clsx(
-				'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
-				isScrolled
-					? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
-					: 'dark:bg-transparent'
-			)}
+			className="sticky top-0 z-50"
 		>
-			<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
-				<div className="mr-6 flex lg:hidden">
-					<MobileNavigation />
-				</div>
-				<div className="relative flex flex-grow basis-0 items-center">
-					<Link
-						href="/"
-						aria-label="Home page"
-						className="relative z-10 hidden md:block"
-					>
-						<Logo className="h-9 w-auto" />
-					</Link>
-					{/* <Link
-						href="/"
-						aria-label="Home page"
-						className="relative z-10 md:block text-vermilion-08 hover:text-vermilion-07 ml-2"
-					>
-						Documentation
-					</Link>
-					<Link
-						href="https://community.sourcegraph.com"
-						aria-label="Home page"
-						className="relative z-10 hidden md:block text-vermilion-08 hover:text-vermilion-07 ml-4"
-					>
-						Help
-					</Link> */}
-					<Link
-						href="/"
-						className="relative z-10 block md:hidden"
-						aria-label="Home page"
-					>
-						<LogoMark className="h-6 w-6" />
-					</Link>
-				</div>
-				<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-					<Search />
-				</div>
-				<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
-					<VersionSelector />
-					<ThemeSelector className="relative z-10" />
-					<Link
-						href="https://github.com/sourcegraph/docs"
-						className="group"
-						aria-label="GitHub"
-					>
-						<span className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border">
-							<GitHubIcon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
-						</span>
-					</Link>
-				</div>
-			</div>
-		</header>
-	);
-}
-
-export function Layout({ children }: { children: React.ReactNode }) {
-	let pathname = usePathname();
-	let isHomePage = pathname === '/';
-	let isCodyDocs = pathname.includes('/cody');
-	let isopenCtxDocs = pathname.includes('/cody/capabilities/openctx');
-
-	return (
-		<div className="flex w-full flex-col">
-			<Header />
-
 			{/* Cody docs banner */}
-			{/*isCodyDocs && !isopenCtxDocs && <TopBanner
+			{isCodyDocs && !isopenCtxDocs && <TopBanner
 				text="NEW: Introducing chat and search in a single input with Sourcegraph 6.0."
 				link="https://sourcegraph.com/blog/combining-chat-and-search"
 				linkText="Read here"
 				textColor="#ffffff"
 				backgroundColor="#F34E3F"
 				opacity='0.80'
-			/>/*}
+			/>}
 
 			{/* Openctx docs banner */}
 			{/* {isopenCtxDocs && <TopBanner
@@ -126,7 +61,62 @@ export function Layout({ children }: { children: React.ReactNode }) {
 				linkText="Read docs to learn more about configuring MCP."
 				textColor="#ffffff"
 				backgroundColor="#F34E3F"
-			/>} */}
+				/>} */}
+
+			<div className={clsx(
+				'flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
+				isScrolled
+					? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
+					: 'dark:bg-transparent'
+			)}>
+				<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
+					<div className="mr-6 flex lg:hidden">
+						<MobileNavigation />
+					</div>
+					<div className="relative flex flex-grow basis-0 items-center">
+						<Link
+							href="/"
+							aria-label="Home page"
+							className="relative z-10 hidden md:block"
+						>
+							<Logo className="h-9 w-auto" />
+						</Link>
+						<Link
+							href="/"
+							className="relative z-10 block md:hidden"
+							aria-label="Home page"
+						>
+							<LogoMark className="h-6 w-6" />
+						</Link>
+					</div>
+					<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+						<Search />
+					</div>
+					<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
+						<VersionSelector />
+						<ThemeSelector className="relative z-10" />
+						<Link
+							href="https://github.com/sourcegraph/docs"
+							className="group"
+							aria-label="GitHub"
+						>
+							<span className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border">
+								<GitHubIcon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
+							</span>
+						</Link>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	let pathname = usePathname();
+	let isHomePage = pathname === '/';
+	return (
+		<div className="flex w-full flex-col">
+			<Header />
 
 			{isHomePage && <Hero />}
 			{/* {isHomePage && <DemoLayout />} */}
diff --git a/src/components/TopBanner.tsx b/src/components/TopBanner.tsx
index 803a2580b..5ffd14ef4 100644
--- a/src/components/TopBanner.tsx
+++ b/src/components/TopBanner.tsx
@@ -36,7 +36,7 @@ export function TopBanner({
   return (
     <div
       style={{ backgroundColor: `rgba(${hexToRgb(backgroundColor)}, ${opacity})`, color: textColor }}
-      className="fixed top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
+      className="sticky top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
     >
       <div className="flex items-center gap-2 text-xs sm:text-sm max-w-[90%] md:max-w-none text-center">
         <span className="line-clamp-2 md:line-clamp-1">{text}</span>