From 3aad4c395f7a9175b6a1920d5f7ad434ad53a4a0 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Thu, 24 May 2018 15:13:59 -0400
Subject: [PATCH] Add a code block element for the transaction input content

---
 apps/explorer_web/assets/css/app.scss                  |  5 ++++-
 apps/explorer_web/assets/css/code.scss                 |  7 +++++++
 .../templates/transaction/overview.html.eex            | 10 +++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 apps/explorer_web/assets/css/code.scss

diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss
index 03e77f4465..ea2b41c577 100644
--- a/apps/explorer_web/assets/css/app.scss
+++ b/apps/explorer_web/assets/css/app.scss
@@ -19,11 +19,13 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/root";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
+@import "node_modules/bootstrap/scss/code";
 @import "node_modules/bootstrap/scss/utilities/spacing";
 @import "node_modules/bootstrap/scss/utilities/sizing";
 @import "node_modules/bootstrap/scss/utilities/display";
 @import "node_modules/bootstrap/scss/utilities/flex";
 @import "node_modules/bootstrap/scss/utilities/text";
+@import "node_modules/bootstrap/scss/utilities/background";
 
 // Bootstrap Components
 @import "node_modules/bootstrap/scss/dropdown";
@@ -40,6 +42,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "content";
 @import "utilities";
 @import "typography";
+@import "tooltip";
+@import "code";
 @import "components/panels";
 @import "components/header";
 @import "components/sidebar";
@@ -52,7 +56,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/filter";
 @import "components/button";
 @import "components/table";
-@import "tooltip";
 
 :export {
   primary: $primary;
diff --git a/apps/explorer_web/assets/css/code.scss b/apps/explorer_web/assets/css/code.scss
new file mode 100644
index 0000000000..223c586d5d
--- /dev/null
+++ b/apps/explorer_web/assets/css/code.scss
@@ -0,0 +1,7 @@
+.pre-wrap {
+  white-space: normal;
+
+  code {
+    word-break: break-all;
+  }
+}
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex
index 3fe5baa64b..56052a98a7 100644
--- a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex
@@ -153,7 +153,15 @@
                   <%= gettext "Input" %>
                 </th>
                 <td title="<%= @transaction.input %>">
-                  <%= @transaction.input %>
+                  <div class="card bg-light">
+                    <div class="card-body">
+                      <pre class="pre-scrollable pre-wrap mb-0">
+                        <code>
+                          <%= @transaction.input %>
+                        </code>
+                      </pre>
+                    </div>
+                  </div>
                 </td>
               </tr>
             </tbody>