Fix bug where overview alerts can abut one another

openshift · Aug 16, 2019 · 93474c2 · 93474c2
1 parent 12cafb5
commit 93474c2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/public/components/overview/_project-overview.scss b/frontend/public/components/overview/_project-overview.scss
@@ -160,6 +160,14 @@
   }
 }
 
+.project-overview__status .co-icon-and-text {
+  margin-right: 12px;
+
+  .project-overview__builds & {
+    margin-right: 4px;
+  }
+}
+
 @media (min-width: $screen-md-min) {
   // Metrics are hidden when the sidebar is open. Adjust list row styles.
   .overview--sidebar-shown .project-overview {

diff --git a/frontend/public/components/overview/project-overview.tsx b/frontend/public/components/overview/project-overview.tsx
@@ -151,7 +151,7 @@ const AlertTooltip = ({alerts, severity, noSeverityLabel=false}) => {
   // Disable the tooltip on mobile since a touch also opens the sidebar, which
   // immediately covers the tooltip content.
   return <Tooltip content={content} styles={overviewTooltipStyles} disableOnMobile>
-    <TooltipStatus status={severity} title={noSeverityLabel ? String(count) : pluralize(count, label)} />
+    <span className="project-overview__status"><TooltipStatus status={severity} title={noSeverityLabel ? String(count) : pluralize(count, label)} /></span>
   </Tooltip>;
 };
 
@@ -173,7 +173,7 @@ const Alerts: React.SFC<AlertsProps> = ({item}) => {
     {error && <AlertTooltip severity="Error" alerts={error} />}
     {warning && <AlertTooltip severity="Warning" alerts={warning} />}
     {info && <AlertTooltip severity="Info" alerts={info} />}
-    {(buildNew || buildPending || buildRunning || buildFailed || buildError) && <div>
+    {(buildNew || buildPending || buildRunning || buildFailed || buildError) && <div className="project-overview__builds">
       Builds {buildNew && <AlertTooltip severity="New" alerts={buildNew} noSeverityLabel />} {buildPending && <AlertTooltip severity="Pending" alerts={buildPending} noSeverityLabel />} {buildRunning && <AlertTooltip severity="Running" alerts={buildRunning} noSeverityLabel />} {buildFailed && <AlertTooltip severity="Failed" alerts={buildFailed} noSeverityLabel />} {buildError && <AlertTooltip severity="Error" alerts={buildError} noSeverityLabel />}
     </div>}
   </div>;