mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-25 00:21:28 +02:00
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
This commit is contained in:
2
.astro/types.d.ts
vendored
2
.astro/types.d.ts
vendored
@@ -1,2 +1,2 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
/// <reference path="content.d.ts" />
|
||||
|
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@@ -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: {}
|
@@ -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 || []} />
|
||||
)}
|
||||
|
@@ -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,
|
||||
},
|
||||
)}
|
||||
>
|
||||
|
Reference in New Issue
Block a user