fix(graph): formatting fixes after rebase

graph/client/src/app/feature-projects/project-list.tsx

@@ -219,7 +219,7 @@ function SubProjectList({
           </span>
         </div>
       ) : null}
-      <ul className="mt-2 -ml-3">
+      <ul className="-ml-3 mt-2">
         {sortedProjects.map((project) => {
           return (
             <ProjectListItem

graph/client/src/app/shell.tsx

@@ -123,7 +123,7 @@ export function Shell(): JSX.Element {
       <div
         className={`${
           environmentConfig.environment === 'nx-console'
-            ? 'absolute top-5 left-5 z-50 bg-white'
+            ? 'absolute left-5 top-5 z-50 bg-white'
             : 'relative flex h-full overflow-y-scroll'
         } w-72 flex-col pb-10 shadow-lg ring-1 ring-slate-900/10 ring-opacity-10 transition-all dark:ring-slate-300/10`}
         id="sidebar"
@@ -251,7 +251,7 @@ export function Shell(): JSX.Element {
               data-cy="downloadImageButton"
               onClick={downloadImage}
             >
-              <ArrowDownTrayIcon className="absolute top-1/2 left-1/2 -mt-3 -ml-3 h-6 w-6" />
+              <ArrowDownTrayIcon className="absolute left-1/2 top-1/2 -ml-3 -mt-3 h-6 w-6" />
             </button>
           </Tooltip>
         </div>

graph/client/src/app/ui-components/project-details-modal.tsx

@@ -50,15 +50,15 @@ export function ProjectDetailsModal() {
   return (
     isOpen && (
       <div
-        className="fixed top-24 right-4 z-20 h-max w-1/3 bg-white opacity-100  dark:bg-slate-800"
+        className="fixed right-4 top-24 z-20 h-max w-1/3 bg-white opacity-100  dark:bg-slate-800"
         style={{
           height: 'calc(100vh - 6rem - 2rem)',
         }}
         ref={refs.setFloating}
       >
         <div className="h-full rounded-md border border-slate-500">
           <ProjectDetailsWrapper project={project} sourceMap={sourceMap} />
-          <div className="absolute top-2 right-2" onClick={onClose}>
+          <div className="absolute right-2 top-2" onClick={onClose}>
             <XMarkIcon className="h-4 w-4" />
           </div>
         </div>

graph/ui-components/src/lib/error-renderer.tsx

@@ -16,7 +16,7 @@ export function ErrorRenderer({ errors }: { errors: GraphError[] }) {
             : error.fileName;
         return (
           <div className="overflow-hidden pb-4">
-            <span className="inline-flex max-w-full flex-col break-words font-normal font-bold text-gray-900 dark:text-slate-200 md:inline">
+            <span className="inline-flex max-w-full flex-col break-words font-bold font-normal text-gray-900 md:inline dark:text-slate-200">
               <span>{errorHeading}</span>
               <span className="hidden px-1 md:inline">-</span>
               <span>{fileSpecifier}</span>

graph/ui-components/src/lib/modal.tsx

@@ -74,10 +74,10 @@ export const Modal = forwardRef(
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
                 <Dialog.Panel
-                  className={`relative my-8 mx-4 w-full transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-slate-900 md:max-w-5xl xl:max-w-7xl
+                  className={`relative mx-4 my-8 w-full transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all md:max-w-5xl xl:max-w-7xl dark:bg-slate-900
                   `}
                 >
-                  <div className="flex items-center justify-between rounded-t border-b bg-white p-2 pb-1 dark:border-gray-600 dark:bg-slate-900 md:p-4 md:pb-2">
+                  <div className="flex items-center justify-between rounded-t border-b bg-white p-2 pb-1 md:p-4 md:pb-2 dark:border-gray-600 dark:bg-slate-900">
                     <Dialog.Title
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-900 dark:text-slate-200"
@@ -94,7 +94,7 @@ export const Modal = forwardRef(
                       <span className="sr-only">Close modal</span>
                     </button>
                   </div>
-                  <div className="max-h-[90vh] overflow-y-auto bg-white p-2 dark:bg-slate-900 md:p-4">
+                  <div className="max-h-[90vh] overflow-y-auto bg-white p-2 md:p-4 dark:bg-slate-900">
                     {children}
                   </div>
                 </Dialog.Panel>

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

@@ -86,7 +86,7 @@ export const ProjectDetails = ({
           <span>
             {onViewInProjectGraph ? (
               <button
-                className="inline-flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
+                className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
                 onClick={() =>
                   onViewInProjectGraph({ projectName: project.name })
                 }

graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx

@@ -86,7 +86,7 @@ export function TargetConfigurationGroupList({
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="fixed top-0 left-0 right-0 z-10 mb-8 border-b-2 border-slate-900/10 bg-slate-50 dark:border-slate-300/10 dark:bg-slate-800 dark:text-slate-300">
+        <div className="fixed left-0 right-0 top-0 z-10 mb-8 border-b-2 border-slate-900/10 bg-slate-50 dark:border-slate-300/10 dark:bg-slate-800 dark:text-slate-300">
           <div className="mx-auto max-w-6xl px-8 pt-2">
             <TargetConfigurationGroupHeader
               targetGroupName={stickyHeaderContent}

graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx

@@ -64,7 +64,7 @@ export const TargetConfigurationDetailsHeader = ({
         collapsable ? 'cursor-pointer' : '',
         isCompact ? 'px-2 py-1' : 'p-2',
         !isCollasped || !collapsable
-          ? 'border-b bg-slate-50 dark:border-slate-700/60 dark:border-slate-300/10 dark:bg-slate-800 '
+          ? 'border-b bg-slate-50 dark:border-slate-300/10 dark:border-slate-700/60 dark:bg-slate-800 '
           : ''
       )}
       onClick={collapsable ? toggleCollapse : undefined}
@@ -148,7 +148,7 @@ export const TargetConfigurationDetailsHeader = ({
         </div>
       </div>
       {!isCollasped && (
-        <div className="mt-2 ml-5 text-sm">
+        <div className="ml-5 mt-2 text-sm">
           <SourceInfo
             data={sourceMap[`targets.${targetName}`]}
             propertyKey={`targets.${targetName}`}

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

@@ -141,7 +141,7 @@ export const TargetConfigurationDetailsComponent = ({
               {singleCommand ? (
                 <span className="font-medium">
                   Command
-                  <span className="ml-2 mb-1 hidden group-hover:inline">
+                  <span className="mb-1 ml-2 hidden group-hover:inline">
                     <CopyToClipboard
                       onCopy={() =>
                         handleCopyClick(`"command": "${singleCommand}"`)
@@ -191,7 +191,7 @@ export const TargetConfigurationDetailsComponent = ({
                     <TooltipTriggerText>Inputs</TooltipTriggerText>
                   </span>
                 </Tooltip>
-                <span className="ml-2 mb-1 hidden group-hover:inline">
+                <span className="mb-1 ml-2 hidden group-hover:inline">
                   <CopyToClipboard
                     onCopy={() =>
                       handleCopyClick(
@@ -241,7 +241,7 @@ export const TargetConfigurationDetailsComponent = ({
                     <TooltipTriggerText>Outputs</TooltipTriggerText>
                   </span>
                 </Tooltip>
-                <span className="ml-2 mb-1 hidden group-hover:inline">
+                <span className="mb-1 ml-2 hidden group-hover:inline">
                   <CopyToClipboard
                     onCopy={() =>
                       handleCopyClick(

nx-dev/nx-dev/pages/tips.tsx

@@ -453,7 +453,7 @@ export default function NewYear(): JSX.Element {
             className="py-18 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
           >
             <article id="nx-new-year-tips-intro" className="relative">
-              <h1 className="my-8 text-3xl font-semibold dark:text-white sm:text-5xl">
+              <h1 className="my-8 text-3xl font-semibold sm:text-5xl dark:text-white">
                 Nx New Year Tips
               </h1>
               <p>
@@ -477,7 +477,7 @@ export default function NewYear(): JSX.Element {
             className="py-18 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
           >
             <article id="nx-new-year-tips" className="relative">
-              <div className="mx-auto grid grid-cols-1 items-stretch gap-8 py-12 dark:text-slate-100 sm:grid-cols-2 md:grid-cols-3 lg:py-16">
+              <div className="mx-auto grid grid-cols-1 items-stretch gap-8 py-12 sm:grid-cols-2 md:grid-cols-3 lg:py-16 dark:text-slate-100">
                 {shownTips.map((tip) => (
                   <FlipCard
                     key={tip.day}

nx-dev/ui-markdoc/src/lib/tags/call-to-action.component.tsx

@@ -13,7 +13,7 @@ export function CallToAction({
   icon?: string;
 }): JSX.Element {
   return (
-    <div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
+    <div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
       <div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
       <div className="w-2 bg-blue-500 dark:bg-sky-500"></div>
 

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -198,7 +198,7 @@ export function Card({
         ) : null}
 
         {/*HOVER ICON*/}
-        <span className="absolute right-2 top-1/2 -translate-y-2.5 -translate-x-2 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100">
+        <span className="absolute right-2 top-1/2 -translate-x-2 -translate-y-2.5 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100">
           <ArrowRightCircleIcon className="h-5 w-5" />
         </span>
       </div>