fix(graph): add spacing between graph details top (#28055)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

<img width="330" alt="Screenshot 2024-09-23 at 1 26 23 PM"
src="https://github.com/user-attachments/assets/fa62fcb6-a0a5-4684-a162-8003d1156418">
<img width="994" alt="Screenshot 2024-09-23 at 1 26 10 PM"
src="https://github.com/user-attachments/assets/8b2c8949-7aeb-4e9f-9502-14381ad980e4">

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

graph/ui-project-details/src/lib/project-details/project-details.tsx

@@ -106,16 +106,16 @@ export const ProjectDetails = ({
               </p>
             ) : null}
             {projectData.tags && projectData.tags.length ? (
-              <TagList tags={projectData.tags} />
+              <TagList className="mb-2" tags={projectData.tags} />
             ) : null}
             {projectData.root ? (
-              <p>
+              <p className="mb-2">
                 <span className="font-medium">Root:</span>
                 <span className="font-mono"> {projectData.root.trim()}</span>
               </p>
             ) : null}
             {projectData.projectType ?? typeToProjectType[project.type] ? (
-              <p>
+              <p className="mb-2">
                 <span className="font-medium">Type:</span>
                 <span className="ml-2 font-mono capitalize">
                   {projectData.projectType ?? typeToProjectType[project.type]}

graph/ui-project-details/src/lib/tag-list/tag-list.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Pill } from '../pill';
+import { twMerge } from 'tailwind-merge';
 
 interface TagListProps {
   tags: string[];
+  className: string;
 }
 
-export function TagList({ tags }: TagListProps) {
+export function TagList({ tags, className }: TagListProps) {
   const [isExpanded, _setIsExpanded] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
   const tagsContainerRef = useRef<HTMLSpanElement>(null);
@@ -34,7 +36,7 @@ export function TagList({ tags }: TagListProps) {
   }, [tagsContainerRef]);
 
   return (
-    <div className="relative max-w-full">
+    <div className={twMerge('relative max-w-full', className)}>
       <p className="flex min-w-0 font-medium leading-loose">
         <span className="inline-block">Tags:</span>