fix(reporter): minor UI fixes and improvements (#8153)

Author: panzarino

packages/reporter/src/agents/agents.tsx

@@ -45,7 +45,7 @@ const Agents = observer(({ model }: AgentsProps) => (
         <li className='hook-item'>
           <Collapsible
             header={`Spies / Stubs (${model.agents.length})`}
-            headerClass='hook-name'
+            headerClass='hook-header'
             contentClass='instrument-content'
           >
             <table>

packages/reporter/src/commands/commands.scss

@@ -40,7 +40,7 @@
         padding: 4px 0;
 
         &:focus {
-          outline: 1px dotted #6c6c6c;
+          outline: none;
         }
 
         > .collapsible-header-inner:focus {

packages/reporter/src/routes/routes.tsx

@@ -55,7 +55,7 @@ const Routes = observer(({ model }: RoutesProps) => (
         <li className='hook-item'>
           <Collapsible
             header={`Routes (${model.routes.length})`}
-            headerClass='hook-name'
+            headerClass='hook-header'
             contentClass='instrument-content'
           >
             <table>

packages/reporter/src/runnables/runnables.scss

@@ -111,6 +111,7 @@
     &.runnable-pending > div > .runnable-wrapper,
     &.runnable-pending > div > .runnable-instruments {
       border-left: 5px solid lighten($pending, 25%);
+      padding-bottom: 0;
     }
 
     &.runnable-passed > div > .runnable-wrapper,