fix(unify): reporter styles (#19034)

Co-authored-by: Mark Noonan <mark@cypress.io>

Author: Shawn Taylor

packages/app/src/runner/reporter.ts

@@ -29,12 +29,6 @@ function renderReporter (
   store: MobxRunnerStore,
   eventManager: EventManager,
 ) {
-  class EmptyHeader extends window.UnifiedRunner.React.Component {
-    render () {
-      return window.UnifiedRunner.React.createElement('div')
-    }
-  }
-
   const reporter = window.UnifiedRunner.React.createElement(window.UnifiedRunner.Reporter, {
     runMode: 'single' as const,
     runner: eventManager.reporterBus,
@@ -44,10 +38,6 @@ function renderReporter (
     error: null, // errorMessages.reporterError(props.state.scriptError, props.state.spec.relative),
     resetStatsOnSpecChange: true,
     experimentalStudioEnabled: false,
-    // TODO: Are we re-skinning the Reporter header?
-    // If so, with React or Vue?
-    // For now, just render and empty div.
-    renderReporterHeader: (props: null) => window.UnifiedRunner.React.createElement(EmptyHeader, props),
   })
 
   window.UnifiedRunner.ReactDOM.render(reporter, root)

packages/reporter/src/lib/base.scss

@@ -46,6 +46,11 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
     font-weight: bold;
   }
 
+  svg {
+    display: inline-block;
+    vertical-align: initial;
+  }
+
   em {
     font-style: italic;
   }

packages/reporter/src/runnables/runnables.scss

@@ -234,6 +234,7 @@
     }
 
     .runnable-state-icon {
+      flex-shrink: 0;
       margin-right: 5px;
       margin-top: 4px;