fix(graph): fix scrolling to take group header height into account

nrwl · Jul 23, 2024 · ba59f18 · ba59f18
1 parent 1469b26
commit ba59f18
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/...et-configuration-details-group-container/target-configuration-details-group-container.tsx b/...et-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/...b/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/...b/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
@@ -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',
         });
       }