From ba59f18bac43679fa940e76ee6a8705ce47e594d Mon Sep 17 00:00:00 2001
From: Max Kless <maxk@nrwl.io>
Date: Tue, 23 Jul 2024 15:40:34 +0200
Subject: [PATCH] fix(graph): fix scrolling to take group header height into
 account

---
 .../target-configuration-details-group-container.tsx      | 5 ++++-
 .../target-configuration-details-group-header.tsx         | 1 +
 .../ui-markdoc/src/lib/tags/project-details.component.tsx | 8 +++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
index cb2f867d27e77..17e9d3e10aa47 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
@@ -15,7 +15,10 @@ export function TargetConfigurationGroupContainer({
     return null;
   }
   return (
-    <div className="mb-4 w-full">
+    <div
+      id={`target-group-container-${targetGroupName}`}
+      className="mb-4 w-full"
+    >
       <TargetConfigurationGroupHeader
         targetGroupName={targetGroupName}
         targetsNumber={targetsNumber}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
index 5675e689d7a37..a36e1d123c493 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
@@ -16,6 +16,7 @@ export const TargetConfigurationGroupHeader = ({
 }: TargetConfigurationGroupHeaderProps) => {
   return (
     <header
+      id={`target-group-header-${targetGroupName}`}
       className={`flex items-center gap-2 px-4 py-2 text-lg capitalize ${className}`}
     >
       {targetGroupName}{' '}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
index 1d8685c4ef362..13a8aeef4609c 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx
@@ -58,10 +58,16 @@ export function ProjectDetails({
       const header = document.getElementById('target-' + expandedTargets[0]);
       const container = document.getElementById('project-details-container');
       if (header && container) {
+        const groupHeaderOffset =
+          header
+            .closest('[id^="target-group-container-"]')
+            ?.querySelector('[id^="target-group-header-"]')
+            ?.getBoundingClientRect().height ?? 0;
         elementRef.current?.scrollTo({
           top:
             header?.getBoundingClientRect().top -
-            container.getBoundingClientRect()?.top,
+            container.getBoundingClientRect()?.top -
+            groupHeaderOffset,
           behavior: 'instant',
         });
       }