From d0f94d15eb4fc5a1fa7db49d17f972e9277f1326 Mon Sep 17 00:00:00 2001
From: Alex Visan <79447321+alexandruvisan19@users.noreply.github.com>
Date: Tue, 21 Mar 2023 03:16:14 +0200
Subject: [PATCH] fix toc to highlight the correct header on click (#5765)

* fix toc to highlight the correct header on click

* fix case for when the toc has only a few headings
---
 src/components/Layout/useTocHighlight.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/useTocHighlight.tsx b/src/components/Layout/useTocHighlight.tsx
index b0879a14..544396c6 100644
--- a/src/components/Layout/useTocHighlight.tsx
+++ b/src/components/Layout/useTocHighlight.tsx
@@ -4,7 +4,7 @@
 
 import {useState, useRef, useEffect} from 'react';
 
-const TOP_OFFSET = 75;
+const TOP_OFFSET = 85;
 
 export function getHeaderAnchors(): HTMLAnchorElement[] {
   return Array.prototype.filter.call(
@@ -32,7 +32,7 @@ export function useTocHighlight() {
       const scrollPosition = window.scrollY + window.innerHeight;
       const headersAnchors = getHeaderAnchors();
 
-      if (scrollPosition >= 0 && pageHeight - scrollPosition <= TOP_OFFSET) {
+      if (scrollPosition >= 0 && pageHeight - scrollPosition <= 0) {
         // Scrolled to bottom of page.
         setCurrentIndex(headersAnchors.length - 1);
         return;