align test studio icon at the top

Author: mabela416

packages/reporter/src/studio/StudioTest.scss

@@ -6,14 +6,18 @@
 
 .studio-header__test-section {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   border-bottom: 1px solid $gray-900;
   padding: 16px;
   gap: 8px;
   font-size: 14px;
   line-height: 20px;
   flex-shrink: 0;
 
+  .state-icon {
+    margin-top: 3px;
+  }
+
   svg {
     flex-shrink: 0;
   }

packages/reporter/src/studio/StudioTest.tsx

@@ -35,20 +35,22 @@ const getParentTitlesListElements = (parentTitles: string[]) => {
 }
 
 const StatusIcon = ({ test }: { test: Test }) => {
+  let className = 'state-icon'
+
   if (test.state === 'active') {
-    return <IconStatusRunningOutline data-cy='running-icon' size='16' fillColor='gray-700' strokeColor='indigo-400' />
+    return <IconStatusRunningOutline className={className} data-cy='running-icon' size='16' fillColor='gray-700' strokeColor='indigo-400' />
   }
 
   if (test.state === 'failed') {
-    return <IconStatusFailedSolid data-cy='failed-icon' size='16' strokeColor='red-400' />
+    return <IconStatusFailedSolid className={className} data-cy='failed-icon' size='16' strokeColor='red-400' />
   }
 
   if (test.state === 'passed') {
-    return <IconStatusPassedSolid data-cy='passed-icon' size='16' strokeColor='jade-400' />
+    return <IconStatusPassedSolid className={className} data-cy='passed-icon' size='16' strokeColor='jade-400' />
   }
 
   // processing state or default state
-  return <IconStatusQueuedOutline data-cy='queued-icon' size='16' strokeColor="gray-700" />
+  return <IconStatusQueuedOutline className={className} data-cy='queued-icon' size='16' strokeColor="gray-700" />
 }
 
 interface StudioTestProps {