css updates for details/charts (#383)

sass/components/ClusterOverview/health.scss

@@ -6,5 +6,10 @@
 
   .kubevirt-dashboard__card {
     min-height: 120px;
+    height: 100%;
+  }
+
+  .pf-l-grid-item {
+    height: 100%;
   }
 }

sass/components/Dashboard/capacity.scss

@@ -8,9 +8,8 @@
   display: flex;
   flex-direction: column;
   text-align: center;
-  flex-grow: 0;
-  width: 11em;
-  height: 15em;
+  justify-content: space-between;
+  flex: 0 1 120px;
 }
 
 .kubevirt-capacity__item-title {
@@ -34,4 +33,8 @@
     overflow: visible;
   }
 }
+
+.kubevirt-capacity__card {
+  height: 100%;
+}
 /* stylelint-enable */

sass/components/Dashboard/detail.scss

@@ -2,19 +2,22 @@
   margin-bottom: 1rem;
 }
 
+.kubevirt-detail__list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .kubevirt-detail__item-title {
-  float: left;
-  clear: left;
-  // width: 150px;
-  margin-bottom: 5px;
-  font-size: 14px;
+  font-size: 0.875rem;
   text-transform: capitalize;
+  flex-basis: 100%;
 }
 
 .kubevirt-detail__item-value {
-  margin: 0 0 5px 160px;
-  font-size: 14px;
+  font-size: 0.875rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-basis: 100%;
+  margin-bottom: 8px;
 }

sass/components/Dashboard/events.scss

@@ -52,6 +52,10 @@
   .co-sysevent__subheader > *:not(:first-child) {
     margin-left: 6px;
   }
+
+  .co-sysevent-stream__status-box-empty {
+    margin-right: 15px;
+  }
 }
 
 .kubevirt-events__timestamp i {
@@ -60,9 +64,10 @@
 /* stylelint-enable */
 
 .kubevirt-events__card-body {
-  margin: 0;
+  margin: 0 -15px 0 0;
   padding: 0;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .kubevirt-events__card-header {

sass/components/StorageOverview/data-resiliency.scss

@@ -22,7 +22,7 @@
 }
 
 .kubevirt-data-resiliency__icon-error {
-  color: red;
+  color: #c9190b;
 }
 
 .kubevirt-data-resiliency__status-title-ok {

src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap

@@ -16,7 +16,9 @@ exports[`<Details /> renders correctly 1`] = `
   <div
     class="card-pf-body"
   >
-    <dl>
+    <dl
+      class="kubevirt-detail__list"
+    >
       <dt
         class="kubevirt-detail__item-title"
       >

src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap

@@ -26,7 +26,9 @@ exports[`<ClusterOverview /> renders correctly with Provider 1`] = `
           <div
             class="card-pf-body"
           >
-            <dl>
+            <dl
+              class="kubevirt-detail__list"
+            >
               <dt
                 class="kubevirt-detail__item-title"
               >

src/components/Dashboard/Details/DetailsBody.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const DetailsBody = ({ children }) => <dl>{children}</dl>;
+export const DetailsBody = ({ children }) => <dl className="kubevirt-detail__list">{children}</dl>;
 
 DetailsBody.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,

src/components/Dashboard/Details/tests/__snapshots__/DetailsBody.test.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DetailsBody /> renders correctly 1`] = `
-<dl>
+<dl
+  class="kubevirt-detail__list"
+>
   <dt
     class="kubevirt-detail__item-title"
   >

src/components/StorageOverview/Capacity/Capacity.js

@@ -16,7 +16,7 @@ import { getCapacityStats } from '../../../selectors';
 import { CapacityBody } from '../../Dashboard/Capacity/CapacityBody';
 
 export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent }) => (
-  <DashboardCard>
+  <DashboardCard className="kubevirt-capacity__card">
     <DashboardCardHeader>
       <DashboardCardTitle>Capacity</DashboardCardTitle>
     </DashboardCardHeader>

src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<Capacity /> renders correctly 1`] = `
 <div
-  class="card-pf kubevirt-dashboard__card"
+  class="card-pf kubevirt-dashboard__card kubevirt-capacity__card"
 >
   <div
     class="card-pf-heading kubevirt-dashboard__card-heading"
@@ -101,7 +101,7 @@ exports[`<Capacity /> renders correctly 1`] = `
 
 exports[`<Capacity /> renders correctly in Loading state 1`] = `
 <div
-  class="card-pf kubevirt-dashboard__card"
+  class="card-pf kubevirt-dashboard__card kubevirt-capacity__card"
 >
   <div
     class="card-pf-heading kubevirt-dashboard__card-heading"

src/components/StorageOverview/Details/tests/__snapshots__/Details.test.js.snap

@@ -16,7 +16,9 @@ exports[`<Details /> renders correctly 1`] = `
   <div
     class="card-pf-body"
   >
-    <dl>
+    <dl
+      class="kubevirt-detail__list"
+    >
       <dt
         class="kubevirt-detail__item-title"
       >

src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap

@@ -26,7 +26,9 @@ exports[`<StorageOverview /> renders correctly with Provider 1`] = `
           <div
             class="card-pf-body"
           >
-            <dl>
+            <dl
+              class="kubevirt-detail__list"
+            >
               <dt
                 class="kubevirt-detail__item-title"
               >