From eddfc4c1fd68f384c83457666db83154ba2df76d Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Sat, 21 Dec 2024 20:05:37 -0600
Subject: [PATCH] fix(client): fsd scroll issue (#57646)

---
 .../Introduction/components/block.tsx         | 21 +++++++++++++------
 client/src/templates/Introduction/intro.css   |  5 +++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 7fa458b66c1..e9b6df12f1b 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -336,7 +336,10 @@ class Block extends Component<BlockProps> {
      * so we can play with it without affecting the existing block layouts.
      */
     const ChallengeListBlock = (
-      <ScrollableAnchor id={block}>
+      <>
+        <ScrollableAnchor id={block}>
+          <span className='hide-scrollable-anchor'></span>
+        </ScrollableAnchor>
         <div
           className={`block block-grid challenge-list-block ${isExpanded ? 'open' : ''}`}
         >
@@ -371,7 +374,7 @@ class Block extends Component<BlockProps> {
             </div>
           )}
         </div>
-      </ScrollableAnchor>
+      </>
     );
 
     /**
@@ -381,7 +384,10 @@ class Block extends Component<BlockProps> {
      * so we can play with it without affecting the existing block layouts.
      */
     const LinkBlock = (
-      <ScrollableAnchor id={block}>
+      <>
+        <ScrollableAnchor id={block}>
+          <span className='hide-scrollable-anchor'></span>
+        </ScrollableAnchor>
         <div className='block block-grid grid-project-block grid-project-block-no-margin'>
           <div className='tags-wrapper'>
             {!isAudited && (
@@ -415,7 +421,7 @@ class Block extends Component<BlockProps> {
           </div>
           <BlockIntros intros={blockIntroArr} />
         </div>
-      </ScrollableAnchor>
+      </>
     );
 
     /**
@@ -423,7 +429,10 @@ class Block extends Component<BlockProps> {
      * This layout is specifically used for the new Full Stack Developer Certification.
      */
     const ChallengeGridBlock = (
-      <ScrollableAnchor id={block}>
+      <>
+        <ScrollableAnchor id={block}>
+          <span className='hide-scrollable-anchor'></span>
+        </ScrollableAnchor>
         <div
           className={`block block-grid challenge-grid-block ${isExpanded ? 'open' : ''}`}
         >
@@ -460,7 +469,7 @@ class Block extends Component<BlockProps> {
             </div>
           )}
         </div>
-      </ScrollableAnchor>
+      </>
     );
 
     const layoutToComponent = {
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index b79a61a52ce..576404fd610 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -11,6 +11,11 @@
   overflow-wrap: break-word;
 }
 
+.hide-scrollable-anchor {
+  display: inline-block;
+  max-height: 0px;
+}
+
 .block-label {
   align-self: center;
   height: fit-content;