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

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 || []} />
           )}

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,
         },
       )}
     >