From de143d9bebf5c75c718e23e271c5dae1b15821c1 Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Fri, 10 Jul 2020 12:06:23 +0300
Subject: [PATCH 1/3] Improve decode log/method view

---
 .../templates/transaction_log/_logs.html.eex  | 25 ++++++++--------
 apps/block_scout_web/priv/gettext/default.pot | 30 +++++++++----------
 .../priv/gettext/en/LC_MESSAGES/default.po    | 30 +++++++++----------
 3 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
index 0d958b938c..cd30449d7a 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
@@ -50,17 +50,19 @@
             </tr>
           </table>
           <div class="table-responsive text-center">
-            <table style="color: black;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
+            <table style="color: black;width: 100%;table-layout: fixed;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
               <tr>
-                <th scope="col"></th>
-                <th scope="col"><%= gettext "Name" %></th>
-                <th scope="col"><%= gettext "Type" %></th>
-                <th scope="col"><%= gettext "Indexed?" %></th>
+                <th scope="col" style="width: 100px;"><%= gettext "Name" %></th>
+                <th scope="col" style="width: 100px;"><%= gettext "Type" %></th>
+                <th scope="col" style="width: 75px;"><%= gettext "Indexed?" %></th>
                 <th scope="col"><%= gettext "Data" %></th>
               <tr>
             <%= for {name, type, indexed?, value} <- mapping do %>
                 <tr>
-                  <th scope="row">
+                  <td><%= name %></td>
+                  <td><%= type %></td>
+                  <td><%= indexed? %></td>
+                  <td align=left>
                     <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
                       <% :error -> %>
                         <%= nil %>
@@ -71,18 +73,14 @@
                           data-clipboard-text="<%= copy_text %>"
                           data-placement="top"
                           data-toggle="tooltip"
+                          style="float: left;height:20px"
                         >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="25" height="25">
                             <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
                           </svg>
                         </span>
                     <% end %>
-                  </th>
-                  <td><%= name %></td>
-                  <td><%= type %></td>
-                  <td><%= indexed? %></td>
-                  <td>
-                    <pre class="transaction-input-text tile"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
+                    <pre class="transaction-input-text pre-wrap" style="display: inline"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
                   </td>
                 </tr>
             <% end %>
@@ -194,4 +192,5 @@
       </div>
     </dd>
   </dl>
+  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/decoded-view-data-toggle.js") %>"></script>
 </div>
diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
index 904669752d..8f1016a187 100644
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/apps/block_scout_web/priv/gettext/default.pot
@@ -451,8 +451,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:66
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:119
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:31
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:69
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:122
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:71
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:120
 msgid "Copy Value"
 msgstr ""
 
@@ -482,9 +482,9 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:109
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:175
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:21
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:59
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:112
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:179
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:177
 msgid "Data"
 msgstr ""
 
@@ -494,7 +494,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:90
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:32
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:40
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:93
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:91
 msgid "Decoded"
 msgstr ""
 
@@ -935,8 +935,8 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:55
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:108
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:111
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
 msgid "Indexed?"
 msgstr ""
 
@@ -1028,7 +1028,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:50
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:103
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:53
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:106
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:104
 msgid "Log Data"
 msgstr ""
 
@@ -1094,8 +1094,8 @@ msgstr ""
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:52
 #: lib/block_scout_web/templates/api_docs/_eth_rpc_item.html.eex:59
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:107
 msgid "Name"
 msgstr ""
 
@@ -1456,7 +1456,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:145
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:149
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:147
 msgid "Topics"
 msgstr ""
 
@@ -1516,8 +1516,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:54
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:107
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:108
 msgid "Type"
 msgstr ""
 
@@ -1776,7 +1776,7 @@ msgid "Loading chart"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:189
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:187
 msgid "Log Index"
 msgstr ""
 
diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
index 904669752d..8f1016a187 100644
--- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -451,8 +451,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:66
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:119
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:31
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:69
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:122
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:71
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:120
 msgid "Copy Value"
 msgstr ""
 
@@ -482,9 +482,9 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:109
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:175
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:21
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:59
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:112
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:179
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:177
 msgid "Data"
 msgstr ""
 
@@ -494,7 +494,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:90
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:32
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:40
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:93
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:91
 msgid "Decoded"
 msgstr ""
 
@@ -935,8 +935,8 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:55
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:108
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:111
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
 msgid "Indexed?"
 msgstr ""
 
@@ -1028,7 +1028,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:50
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:103
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:53
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:106
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:104
 msgid "Log Data"
 msgstr ""
 
@@ -1094,8 +1094,8 @@ msgstr ""
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:52
 #: lib/block_scout_web/templates/api_docs/_eth_rpc_item.html.eex:59
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:107
 msgid "Name"
 msgstr ""
 
@@ -1456,7 +1456,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:145
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:149
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:147
 msgid "Topics"
 msgstr ""
 
@@ -1516,8 +1516,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:54
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:107
 #: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:108
 msgid "Type"
 msgstr ""
 
@@ -1776,7 +1776,7 @@ msgid "Loading chart"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:189
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:187
 msgid "Log Index"
 msgstr ""
 

From 83c794b4e4324dbb14ae80127077d47ff6d8270b Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Fri, 10 Jul 2020 12:17:30 +0300
Subject: [PATCH 2/3] Add CHANGELOG entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4a918d2ae..034605b333 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - [#3184](https://github.com/poanetwork/blockscout/pull/3184) - Apps navbar menu item
 
 ### Fixes
+- [#3190](https://github.com/poanetwork/blockscout/pull/3190) - Contract log/method decoded view improvements: eliminate horizontal scroll, remove excess borders, whitespaces
 - [#3185](https://github.com/poanetwork/blockscout/pull/3185) - Transaction page: decoding logs from nested contracts calls
 - [#3178](https://github.com/poanetwork/blockscout/pull/3178) - Fix permanent fetching tokens...  when read/write proxy tab is active
 - [#3178](https://github.com/poanetwork/blockscout/pull/3178) - Fix unavailable navbar menu when read/write proxy tab is active

From 06e0232d619fc7601f75dc62a352902e84c6f88b Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Fri, 10 Jul 2020 13:27:46 +0300
Subject: [PATCH 3/3] Refine decoding view of contract method, log on
 transaction page, refactoring

---
 .../templates/address_logs/_logs.html.eex     | 79 +------------------
 .../templates/log/_data_decoded_view.html.eex | 37 +++++++++
 .../transaction/_decoded_input_body.html.eex  | 42 +++++-----
 .../templates/transaction_log/_logs.html.eex  | 79 +------------------
 .../lib/block_scout_web/views/log_view.ex     |  3 +
 apps/block_scout_web/priv/gettext/default.pot | 54 +++++--------
 .../priv/gettext/en/LC_MESSAGES/default.po    | 54 +++++--------
 7 files changed, 100 insertions(+), 248 deletions(-)
 create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/log/_data_decoded_view.html.eex
 create mode 100644 apps/block_scout_web/lib/block_scout_web/views/log_view.ex

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex
index 945049ace6..870c61310b 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex
@@ -46,45 +46,7 @@
               <td colspan="3"><code><%= text %></code></td>
             </tr>
           </table>
-          <div class="table-responsive text-center">
-            <table style="color: black;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
-              <tr>
-                <th scope="col"></th>
-                <th scope="col"><%= gettext "Name" %></th>
-                <th scope="col"><%= gettext "Type" %></th>
-                <th scope="col"><%= gettext "Indexed?" %></th>
-                <th scope="col"><%= gettext "Data" %></th>
-              <tr>
-            <%= for {name, type, indexed?, value} <- mapping do %>
-                <tr>
-                  <th scope="row">
-                    <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
-                      <% :error -> %>
-                        <%= nil %>
-                      <% copy_text -> %>
-                        <span
-                          aria-label='<%= gettext "Copy Value" %>'
-                          class="btn-copy-ico"
-                          data-clipboard-text="<%= copy_text %>"
-                          data-placement="top"
-                          data-toggle="tooltip"
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                            <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                          </svg>
-                        </span>
-                    <% end %>
-                  </th>
-                  <td><%= name %></td>
-                  <td><%= type %></td>
-                  <td><%= indexed? %></td>
-                  <td>
-                    <pre class="transaction-input-text tile"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
-                  </td>
-                </tr>
-            <% end %>
-         </table>
-        </div>
+          <%= render BlockScoutWeb.LogView, "_data_decoded_view.html", mapping: mapping %>
         <% {:error, :contract_not_verified, results} -> %>
            <%= for {:ok, method_id, text, mapping} <- results do %>
              <dt class="col-md-2"><%= gettext "Decoded" %></dt>
@@ -99,44 +61,7 @@
                  <td colspan="3"><code><%= text %></code></td>
                </tr>
              </table>
-             <div class="table-responsive text-center">
-               <table style="color: black;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
-                 <tr>
-                   <th scope="col"></th>
-                   <th scope="col"><%= gettext "Name" %></th>
-                   <th scope="col"><%= gettext "Type" %></th>
-                   <th scope="col"><%= gettext "Indexed?" %></th>
-                   <th scope="col"><%= gettext "Data" %></th>
-                 <tr>
-               <%= for {name, type, indexed?, value} <- mapping do %>
-                   <tr>
-                     <th scope="row">
-                       <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
-                         <% :error -> %>
-                           <%= nil %>
-                         <% copy_text -> %>
-                           <span
-                             aria-label='<%= gettext "Copy Value" %>'
-                             class="btn-copy-ico"
-                             data-clipboard-text="<%= copy_text %>"
-                             data-placement="top"
-                             data-toggle="tooltip"
-                           >
-                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                               <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                             </svg>
-                           </span>
-                       <% end %>
-                     </th>
-                     <td><%= name %></td>
-                     <td><%= type %></td>
-                     <td><%= indexed? %></td>
-                     <td>
-                       <pre class="transaction-input-text tile"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
-                     </td>
-                   </tr>
-               <% end %>
-            </table>
+             <%= render BlockScoutWeb.LogView, "_data_decoded_view.html", mapping: mapping %>
          </div>
         <% end %>
        <% _ -> %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/log/_data_decoded_view.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/log/_data_decoded_view.html.eex
new file mode 100644
index 0000000000..3c0fdaaa59
--- /dev/null
+++ b/apps/block_scout_web/lib/block_scout_web/templates/log/_data_decoded_view.html.eex
@@ -0,0 +1,37 @@
+<div class="table-responsive text-center">
+    <table style="color: black;table-layout: fixed;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
+        <tr>
+        <th scope="col" style="width: 110px;"><%= gettext "Name" %></th>
+        <th scope="col" style="width: 100px;"><%= gettext "Type" %></th>
+        <th scope="col" style="width: 75px;"><%= gettext "Indexed?" %></th>
+        <th scope="col"><%= gettext "Data" %></th>
+        <tr>
+    <%= for {name, type, indexed?, value} <- @mapping do %>
+        <tr>
+            <td><%= name %></td>
+            <td><%= type %></td>
+            <td><%= indexed? %></td>
+            <td align=left>
+            <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
+                <% :error -> %>
+                    <%= nil %>
+                <% copy_text -> %>
+                    <span
+                        aria-label='<%= gettext "Copy Value" %>'
+                        class="btn-copy-ico"
+                        data-clipboard-text="<%= copy_text %>"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        style="float: left;height: 20px;"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="25" height="25">
+                        <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
+                        </svg>
+                    </span>
+            <% end %>
+            <pre class="transaction-input-text pre-wrap"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
+            </td>
+        </tr>
+    <% end %>
+    </table>
+</div>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex
index 7f3b04aa86..0efca70238 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex
@@ -15,41 +15,39 @@
   <div class="table-responsive text-center">
     <table style="color: black; table-layout: fixed;" summary="<%= gettext "Transaction Inputs" %>" class="table thead-light table-bordered">
       <tr>
-      <th scope="col" style="width: 60px;"></th>
       <th scope="col" style="width: 10%;"><%= gettext "Name" %></th>
       <th scope="col" style="width: 10%;"><%= gettext "Type" %></th>
       <th scope="col"><%= gettext "Data" %></th>
       <tr>
       <%= for {name, type, value} <- @mapping do %>
         <tr>
-          <th scope="row">
-            <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
-              <% :error -> %>
-                <%= nil %>
-              <% copy_text -> %>
-                <span
-                  aria-label='<%= gettext "Copy Value" %>'
-                  class="btn-copy-ico"
-                  data-clipboard-text='<%= copy_text %>'
-                  data-placement="top"
-                  data-toggle="tooltip"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                    <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                  </svg>
-                </span>
-            <% end %>
-          </th>
           <td><%= name %></td>
           <td><%= type %></td>
-          <td>
+          <td align=left>
             <%= case BlockScoutWeb.ABIEncodedValueView.value_html(type, value) do %>
               <% :error -> %>
                 <div class="alert alert-danger">
                   <%= gettext "Error rendering value" %>
                 </div>
-              <% value -> %>
-                <pre class="transaction-input-text tile pre-wrap"><code><%= value %></code></pre>
+              <% _value -> %>
+                <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
+                  <% :error -> %>
+                    <%= nil %>
+                  <% copy_text -> %>
+                    <span
+                      aria-label='<%= gettext "Copy Value" %>'
+                      class="btn-copy-ico"
+                      data-clipboard-text='<%= copy_text %>'
+                      data-placement="top"
+                      data-toggle="tooltip"
+                      style="float: left;height: 20px;"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="25" height="25">
+                        <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
+                      </svg>
+                    </span>
+                <% end %>
+                <pre class="transaction-input-text pre-wrap" style="margin-bottom: 0px;"><code style="line-height: 25px;"><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
               <% end %>
           </td>
         </tr>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
index cd30449d7a..01b479e2bf 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/_logs.html.eex
@@ -49,43 +49,7 @@
               <td colspan="3"><code><%= text %></code></td>
             </tr>
           </table>
-          <div class="table-responsive text-center">
-            <table style="color: black;width: 100%;table-layout: fixed;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
-              <tr>
-                <th scope="col" style="width: 100px;"><%= gettext "Name" %></th>
-                <th scope="col" style="width: 100px;"><%= gettext "Type" %></th>
-                <th scope="col" style="width: 75px;"><%= gettext "Indexed?" %></th>
-                <th scope="col"><%= gettext "Data" %></th>
-              <tr>
-            <%= for {name, type, indexed?, value} <- mapping do %>
-                <tr>
-                  <td><%= name %></td>
-                  <td><%= type %></td>
-                  <td><%= indexed? %></td>
-                  <td align=left>
-                    <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
-                      <% :error -> %>
-                        <%= nil %>
-                      <% copy_text -> %>
-                        <span
-                          aria-label='<%= gettext "Copy Value" %>'
-                          class="btn-copy-ico"
-                          data-clipboard-text="<%= copy_text %>"
-                          data-placement="top"
-                          data-toggle="tooltip"
-                          style="float: left;height:20px"
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="25" height="25">
-                            <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                          </svg>
-                        </span>
-                    <% end %>
-                    <pre class="transaction-input-text pre-wrap" style="display: inline"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
-                  </td>
-                </tr>
-            <% end %>
-            </table>
-            </div>
+          <%= render BlockScoutWeb.LogView, "_data_decoded_view.html", mapping: mapping %>
           <% {:error, :contract_not_verified, results} -> %>
              <%= for {:ok, method_id, text, mapping} <- results do %>
                <dt class="col-md-2"><%= gettext "Decoded" %></dt>
@@ -100,45 +64,7 @@
                    <td colspan="3"><code><%= text %></code></td>
                  </tr>
                </table>
-               <div class="table-responsive text-center">
-                 <table style="color: black;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered">
-                   <tr>
-                     <th scope="col"></th>
-                     <th scope="col"><%= gettext "Name" %></th>
-                     <th scope="col"><%= gettext "Type" %></th>
-                     <th scope="col"><%= gettext "Indexed?" %></th>
-                     <th scope="col"><%= gettext "Data" %></th>
-                   <tr>
-                 <%= for {name, type, indexed?, value} <- mapping do %>
-                     <tr>
-                       <th scope="row">
-                         <%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %>
-                           <% :error -> %>
-                             <%= nil %>
-                           <% copy_text -> %>
-                             <span
-                               aria-label='<%= gettext "Copy Value" %>'
-                               class="btn-copy-ico"
-                               data-clipboard-text="<%= copy_text %>"
-                               data-placement="top"
-                               data-toggle="tooltip"
-                             >
-                               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                                 <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                               </svg>
-                             </span>
-                         <% end %>
-                       </th>
-                       <td><%= name %></td>
-                       <td><%= type %></td>
-                       <td><%= indexed? %></td>
-                       <td>
-                         <pre class="transaction-input-text tile"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre>
-                       </td>
-                     </tr>
-                 <% end %>
-              </table>
-           </div>
+               <%= render BlockScoutWeb.LogView, "_data_decoded_view.html", mapping: mapping %>
           <% end %>
         <% _ -> %>
           <%= nil %>
@@ -192,5 +118,4 @@
       </div>
     </dd>
   </dl>
-  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/decoded-view-data-toggle.js") %>"></script>
 </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/views/log_view.ex b/apps/block_scout_web/lib/block_scout_web/views/log_view.ex
new file mode 100644
index 0000000000..fe12ba9cce
--- /dev/null
+++ b/apps/block_scout_web/lib/block_scout_web/views/log_view.ex
@@ -0,0 +1,3 @@
+defmodule BlockScoutWeb.LogView do
+  use BlockScoutWeb, :view
+end
diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
index 8f1016a187..772a87c386 100644
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/apps/block_scout_web/priv/gettext/default.pot
@@ -448,11 +448,8 @@ msgid "Difficulty"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:66
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:119
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:31
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:71
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:120
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:20
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:38
 msgid "Copy Value"
 msgstr ""
 
@@ -478,23 +475,20 @@ msgid "Curl"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:56
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:109
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:175
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:21
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:177
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:100
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:7
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:103
 msgid "Data"
 msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:31
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:37
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:90
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:52
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:32
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:40
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:91
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
 msgid "Decoded"
 msgstr ""
 
@@ -605,7 +599,7 @@ msgid "Enter the Solidity Contract Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:49
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:30
 msgid "Error rendering value"
 msgstr ""
 
@@ -933,10 +927,7 @@ msgid "If you have just submitted this transaction please wait for at least 30 s
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:55
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:108
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:6
 msgid "Indexed?"
 msgstr ""
 
@@ -1025,10 +1016,7 @@ msgid "Loading...."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:50
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:103
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:53
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:104
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:2
 msgid "Log Data"
 msgstr ""
 
@@ -1089,13 +1077,10 @@ msgid "Must be set to:"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:53
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:106
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:52
 #: lib/block_scout_web/templates/api_docs/_eth_rpc_item.html.eex:59
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:107
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:4
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:18
 msgid "Name"
 msgstr ""
 
@@ -1455,8 +1440,8 @@ msgid "Topic"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:145
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:147
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:70
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:73
 msgid "Topics"
 msgstr ""
 
@@ -1513,11 +1498,8 @@ msgid "Twitter"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:54
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:107
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:108
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:5
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
 msgid "Type"
 msgstr ""
 
@@ -1776,7 +1758,7 @@ msgid "Loading chart"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:187
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:113
 msgid "Log Index"
 msgstr ""
 
diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
index 8f1016a187..772a87c386 100644
--- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -448,11 +448,8 @@ msgid "Difficulty"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:66
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:119
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:31
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:71
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:120
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:20
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:38
 msgid "Copy Value"
 msgstr ""
 
@@ -478,23 +475,20 @@ msgid "Curl"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:56
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:109
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:175
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:21
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:58
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:110
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:177
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:100
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:7
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:103
 msgid "Data"
 msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:31
 #: lib/block_scout_web/templates/address_logs/_logs.html.eex:37
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:90
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:52
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:32
 #: lib/block_scout_web/templates/transaction_log/_logs.html.eex:40
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:91
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
 msgid "Decoded"
 msgstr ""
 
@@ -605,7 +599,7 @@ msgid "Enter the Solidity Contract Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:49
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:30
 msgid "Error rendering value"
 msgstr ""
 
@@ -933,10 +927,7 @@ msgid "If you have just submitted this transaction please wait for at least 30 s
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:55
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:108
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:57
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:109
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:6
 msgid "Indexed?"
 msgstr ""
 
@@ -1025,10 +1016,7 @@ msgid "Loading...."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:50
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:103
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:53
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:104
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:2
 msgid "Log Data"
 msgstr ""
 
@@ -1089,13 +1077,10 @@ msgid "Must be set to:"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:53
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:106
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:52
 #: lib/block_scout_web/templates/api_docs/_eth_rpc_item.html.eex:59
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:55
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:107
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:4
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:18
 msgid "Name"
 msgstr ""
 
@@ -1455,8 +1440,8 @@ msgid "Topic"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:145
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:147
+#: lib/block_scout_web/templates/address_logs/_logs.html.eex:70
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:73
 msgid "Topics"
 msgstr ""
 
@@ -1513,11 +1498,8 @@ msgid "Twitter"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:54
-#: lib/block_scout_web/templates/address_logs/_logs.html.eex:107
-#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:20
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:56
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:108
+#: lib/block_scout_web/templates/log/_data_decoded_view.html.eex:5
+#: lib/block_scout_web/templates/transaction/_decoded_input_body.html.eex:19
 msgid "Type"
 msgstr ""
 
@@ -1776,7 +1758,7 @@ msgid "Loading chart"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:187
+#: lib/block_scout_web/templates/transaction_log/_logs.html.eex:113
 msgid "Log Index"
 msgstr ""