Use css margin instead of <br>

sass/_components.scss

@@ -34,6 +34,7 @@
 @import './components/StorageOverview/data-resiliency';
 @import './components/StorageOverview/top-consumer';
 @import './components/Status/status';
+@import './components/HostStatus/host-status';
 
 /*
   TODO: these styles should be backported to the corresponding PF-React package

sass/components/HostStatus/host-status.scss

@@ -0,0 +1,7 @@
+.kubevirt-host-status__description {
+  margin-bottom: 1em;
+}
+
+.kubevirt-host-status__reason {
+  margin-bottom: 1em;
+}

src/components/BareMetalHosts/StatusComponents.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from '@patternfly/react-core';
 
-import { Status, OverlayStatus } from '../Status/Status';
+import { Status, OverlayStatus } from '../Status';
 
 // Generic status component as a fallback
 export const GenericStatus = ({ status, text, errorMessage }) => text;

src/components/NodeStatus/NodeStatus.js

@@ -15,15 +15,13 @@ const UnderMaintenanceStatus = ({ node, maintenance, TimestampComponent }) => {
   const created = getCreationTimestamp(maintenance);
   const overlay = (
     <Popover id={`${getName(node)}-status-popover`} title="Under maintenance">
-      <div>This host is under maintenance.</div>
+      <div className="kubevirt-host-status__description">This host is under maintenance.</div>
       {maintenanceReason && (
         <React.Fragment>
-          <br />
           <b>Maintenance reason:</b>
-          <div>{maintenanceReason}</div>
+          <div className="kubevirt-host-status__reason">{maintenanceReason}</div>
         </React.Fragment>
       )}
-      <br />
       <div>
         Started: <TimestampComponent simple timestamp={created} />
       </div>
@@ -48,8 +46,9 @@ const StoppingMaintenanceStatus = ({ node, maintenance, TimestampComponent }) =>
   const deleted = getDeletionTimestamp(maintenance);
   const overlay = (
     <Popover id={`${getName(node)}-status-popover`} title="Stopping maintenance">
-      <div>This host is leaving maintenance. It will rejoin the cluster and resume accepting workloads.</div>
-      <br />
+      <div className="kubevirt-host-status__description">
+        This host is leaving maintenance. It will rejoin the cluster and resume accepting workloads.
+      </div>
       <div>
         Started: <TimestampComponent simple timestamp={created} />
       </div>
@@ -92,7 +91,7 @@ export const NodeStatus = ({ node, maintenances, TimestampComponent }) => {
         />
       );
     default:
-      return false;
+      return null;
   }
 };
 

src/components/VmStatus/VmStatus.js

@@ -20,7 +20,7 @@ import {
   getVmStatus,
 } from '../../utils/status/vm';
 import { getId, getVmImporterPods } from '../../selectors';
-import { Status, LinkStatus } from '../Status/Status';
+import { Status, LinkStatus } from '../Status';
 
 const getAdditionalImportText = pod => ` (${pod.metadata.labels[`${CDI_KUBEVIRT_IO}/${STORAGE_IMPORT_PVC_NAME}`]})`;