From 649873745ff8ca0648b3696173e4a7c3955c784a Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 15 Oct 2020 10:30:34 -0700
Subject: [PATCH] Treat legend term pairs as single wrapping elements

---
 ui/app/styles/components/legend.scss | 10 ++++++++--
 ui/app/templates/topology.hbs        |  6 +++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/app/styles/components/legend.scss b/ui/app/styles/components/legend.scss
index a1ce69d7f..2e86faf97 100644
--- a/ui/app/styles/components/legend.scss
+++ b/ui/app/styles/components/legend.scss
@@ -20,8 +20,14 @@
       margin-left: 0.5em;
     }
 
-    dd + dt {
-      margin-left: 1.5em;
+    .legend-term {
+      display: inline-block;
+      whitespace: nowrap;
+      margin-right: 1.5em;
+
+      &:last-child {
+        margin-right: 0;
+      }
     }
   }
 }
diff --git a/ui/app/templates/topology.hbs b/ui/app/templates/topology.hbs
index 19e627c25..19c1fd515 100644
--- a/ui/app/templates/topology.hbs
+++ b/ui/app/templates/topology.hbs
@@ -16,9 +16,9 @@
             <div class="legend">
               <h3 class="legend-label">Allocation Status</h3>
               <dl class="legend-terms">
-                <dt><span class="color-swatch is-wide running" title="Running" /></dt><dd>Running</dd>
-                <dt><span class="color-swatch is-wide failed" title="Failed" /></dt><dd>Failed</dd>
-                <dt><span class="color-swatch is-wide pending" title="Starting" /></dt><dd>Starting</dd>
+                <div class="legend-term"><dt><span class="color-swatch is-wide running" title="Running" /></dt><dd>Running</dd></div>
+                <div class="legend-term"><dt><span class="color-swatch is-wide failed" title="Failed" /></dt><dd>Failed</dd></div>
+                <div class="legend-term"><dt><span class="color-swatch is-wide pending" title="Starting" /></dt><dd>Starting</dd></div>
               </dl>
             </div>
           </div>