ui: Fixup definition-table + copy-button margin (#10512)

ui/packages/consul-ui/app/components/definition-table/README.mdx

@@ -0,0 +1,25 @@
+---
+class: css
+---
+# definition-table
+
+Simple CSS component to render a `dl` similar to a table with column headers.
+Contents of the `dd` are currently inline-block'ed for CopyButton reasons.
+
+```hbs preview-template
+<div class="definition-table">
+  <dl>
+    <dt>Title 1</dt>
+    <dd>Value</dd>
+    <dt>Title 2</dt>
+    <dd><CopyButton @name="Title 2" @value="Value"/>Value</dd>
+  </dl>
+</div>
+```
+
+
+```css
+.definition-table {
+  @extend %definition-table;
+}
+```

ui/packages/consul-ui/app/components/definition-table/debug.scss

@@ -0,0 +1,5 @@
+[id^='docfy-demo-preview-definition-table'] {
+  .definition-table {
+    @extend %definition-table;
+  }
+}

ui/packages/consul-ui/app/components/definition-table/layout.scss

@@ -3,6 +3,6 @@
   grid-template-columns: 140px auto;
   grid-gap: 0.4em 20px;
 }
-%definition-table .copy-button {
+%definition-table dd > * {
-  float: left;
+  display: inline-block;
 }

ui/packages/consul-ui/app/styles/debug.scss

@@ -8,6 +8,7 @@
 @import 'consul-ui/components/horizontal-kv-list/debug';
 @import 'consul-ui/components/icon-definition/debug';
 @import 'consul-ui/components/inline-alert/debug';
+@import 'consul-ui/components/definition-table/debug';
 
 html.is-debug body > .brand-loader {
   display: none !important;