From 3c06b122e6b7ba2c3be618c10bcedbcd9dbbb1f9 Mon Sep 17 00:00:00 2001
From: Favor <favouronu@gmail.com>
Date: Thu, 4 Sep 2025 09:29:20 +0000
Subject: [PATCH] fix: course banner overlays the table of contents (#9097)

* fix: prevent sticky elements from overlapping with course announcement

- Changed sticky positioning from top-0 to top-[36px] in GuideContent.tsx
- Changed sticky positioning from top-0 to top-[36px] in TableOfContent.tsx
- This accounts for the maximum height of the CourseAnnouncement component
- Fixes visual overlap for both 'Other Guides' and 'In this article' sections

* fix: stop "In this article" title from overlapping with CourseAnnouncement component

* Add comment for announcement hide duration

Added a clarifying comment indicating that the announcement is hidden for 14 days when dismissed.

* revert unrelated files
---
 .astro/types.d.ts                                | 2 +-
 pnpm-lock.yaml                                   | 2 +-
 src/components/Guide/GuideContent.tsx            | 2 +-
 src/components/TableOfContent/TableOfContent.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 03d7cc43f..306a68bfd 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
+/// <reference path="content.d.ts" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a4e363b1..53642fb35 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9897,4 +9897,4 @@ snapshots:
       react: 19.1.0
       use-sync-external-store: 1.5.0(react@19.1.0)
 
-  zwitch@2.0.4: {}
+  zwitch@2.0.4: {}
\ No newline at end of file
diff --git a/src/components/Guide/GuideContent.tsx b/src/components/Guide/GuideContent.tsx
index 9d81e6008..c6ced3a2c 100644
--- a/src/components/Guide/GuideContent.tsx
+++ b/src/components/Guide/GuideContent.tsx
@@ -19,7 +19,7 @@ export function GuideContent(props: GuideContentProps) {
   return (
     <article className="lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]">
       {(showTableOfContent || hasRelatedGuides) && (
-        <div className="sticky top-0 bg-linear-to-r from-gray-50 py-0 lg:relative lg:col-start-3 lg:col-end-4 lg:row-start-1">
+        <div className="sticky top-[36px] bg-linear-to-r from-gray-50 py-0 lg:relative lg:col-start-3 lg:col-end-4 lg:row-start-1">
           {hasRelatedGuides && (
             <RelatedGuides relatedGuides={guide?.relatedGuides || []} />
           )}
diff --git a/src/components/TableOfContent/TableOfContent.tsx b/src/components/TableOfContent/TableOfContent.tsx
index 2ce89d578..a93918856 100644
--- a/src/components/TableOfContent/TableOfContent.tsx
+++ b/src/components/TableOfContent/TableOfContent.tsx
@@ -25,7 +25,7 @@ export function TableOfContent(props: TableOfContentProps) {
       className={cn(
         'relative min-w-[250px] px-5 pt-0 max-lg:max-w-full max-lg:min-w-full max-lg:border-none max-lg:px-0 lg:pt-5',
         {
-          'top-0 lg:sticky!': totalRows <= 20,
+          'top-[36px] lg:sticky!': totalRows <= 20,
         },
       )}
     >