Merge pull request #24 from blockchain-certificates/fix/metadata-display

fix(Metadata): handle text formatting
blockchain-certificates · Jan 9, 2019 · 8a36cc1 · 8a36cc1
2 parents e8244ae + d3ae1b3
commit 8a36cc1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/components/molecules/Metadata/Metadata.js b/src/components/molecules/Metadata/Metadata.js
@@ -44,7 +44,7 @@ class Metadata extends LitElement {
 
         return html`
           <dt class='buv-c-metadata-list__title'>${title}</dt>
-          <dd class='buv-c-metadata-list__detail'>${value}</dd>
+          <dd class='buv-c-metadata-list__detail'><pre class='buv-c-metadata-list__detail-text'>${value}</pre></dd>
         `;
       });
     }

diff --git a/src/components/molecules/Metadata/_components.metadata-css.js b/src/components/molecules/Metadata/_components.metadata-css.js
diff --git a/src/components/molecules/Metadata/_components.metadata.scss b/src/components/molecules/Metadata/_components.metadata.scss
@@ -48,5 +48,12 @@
   margin: 0 0 20px;
 }
 
+.buv-c-metadata-list__detail-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font: inherit;
+  margin: 0;
+}
+
 @import '../../../shared-styles/utils.a11y';
 @import '../../../shared-styles/utils.animations';