fix: navigation to correct heading in tools section

components/tools/ToolsList.js

@@ -1,12 +1,27 @@
 import ToolsCard from './ToolsCard';
 import Heading from '../typography/Heading'
+import { useRef, useEffect } from 'react';
 import Paragraph from '../typography/Paragraph'
 export default function toolsList({ toolsData }) {
+  const categoryRefs = useRef({});
+
+// Below UseEffect scrolls the page to a specific category referenced in the URL hash.
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      const decodedHash = decodeURIComponent(hash.slice(1));
+      const categoryRef = categoryRefs.current[decodedHash];
+      if (categoryRef) {
+        categoryRef.scrollIntoView({ behavior: 'smooth', block: 'start'});
+      }
+    }
+  },[]);
+
   return (
-    <div className="" data-testid="ToolsList-main" >
+    <div data-testid="ToolsList-main" className="max-h-screen overflow-y-auto"  >
       {Object.keys(toolsData).map((categoryName, index) => {
         if(toolsData[categoryName].toolsList.length > 0) return (
-        <div className='my-8' key={index} id={categoryName}>
+          <div className='my-8' key={index} id={categoryName} ref={el => categoryRefs.current[categoryName] = el}>
           <Heading typeStyle='heading-md-semibold' className='my-2' >
             {categoryName}
           </Heading>