(fix) transaction details raw input styles

apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js

@@ -1,6 +1,8 @@
 import $ from 'jquery'
 
 $('.tx-input-dropdown').click(function (e) {
+  e.preventDefault()
+
   var el = $(e.currentTarget)
   var target = $(el.attr('data-target'))
 

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -102,15 +102,30 @@
                 </dd>
               </dl>
           <% end %>
-
           <%= unless value_transfer?(@transaction) do %>
             <dl class="row">
               <dt class="col-sm-3 text-muted"><%= gettext "Raw Input" %></dt>
               <dd class="col-sm-9">
-              <div class="transaction-input" id="tx-raw-input">
+                <div class="d-flex mb-1 justify-content-between">
+                  <!-- Dropdown -->
+                  <div class="dropdown">
+                    <button class="btn-dropdown-line dropdown-toggle" type="button" id="tx-input-decoding-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <%= gettext("Hex (Default)") %>
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="transaction-input-decoding-button">
+                      <a href class="dropdown-item tx-input-dropdown" data-target=".tx-raw-input" id="tx-dropdown-raw">
+                        <%= gettext("Hex (Default)") %>
+                      </a>
+                      <a href class="dropdown-item tx-input-dropdown" data-target=".tx-utf8-input" id="tx-dropdown-utf8">
+                        <%= gettext("UTF-8") %>
+                      </a>
+                    </div>
+                  </div>
+                  <!-- Copy -->
                   <span
                     aria-label="Copy Value"
-                  class="btn-copy-ico mb-1"
+                    class="btn-copy-icon tx-raw-input transaction-input"
+                    id="tx-raw-input"
                     data-clipboard-text="<%= @transaction.input %>"
                     data-placement="top"
                     data-toggle="tooltip"
@@ -119,41 +134,30 @@
                       <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>
-                <div class="tile tile-muted">
+                  <!-- Copy -->
-                  <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input %></code></pre>
-                </div>
-              </div>
-
-              <div class="transaction-input" id="tx-utf8-input" style="display: none;">
                   <span
                     aria-label="Copy Value"
-                  class="btn-copy-ico mb-1"
+                    class="btn-copy-icon tx-utf8-input transaction-input"
                     data-clipboard-text="<%= @transaction.input %>"
                     data-placement="top"
                     data-toggle="tooltip"
+                    style="display: none;"
                   >
                     <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>
+                </div>
+                <!-- Textarea -->
+                <div class="transaction-input tx-raw-input">
                   <div class="tile tile-muted">
-                  <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input.bytes %></code></pre>
+                    <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input %></code></pre>
                   </div>
                 </div>
-
+                <!-- Textfield -->
-              <div class="dropdown pt-1">
+                <div class="transaction-input tx-utf8-input" style="display: none;">
-                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="tx-input-decoding-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <div class="tile tile-muted">
-                  <%= gettext("Hex (Default)") %>
+                    <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input.bytes %></code></pre>
-                </button>
-
-                <div class="dropdown-menu" aria-labelledby="transaction-input-decoding-button">
-                  <a class="dropdown-item tx-input-dropdown" data-target="#tx-raw-input" id="tx-dropdown-raw">
-                    <%= gettext("Hex (Default)") %>
-                  </a>
-
-                  <a class="dropdown-item tx-input-dropdown" data-target="#tx-utf8-input" id="tx-dropdown-utf8">
-                    <%= gettext("UTF-8") %>
-                  </a>
                   </div>
                 </div>
               </dd>