From 665d83eb97a893d914766897341028f632209740 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Thu, 11 Apr 2019 12:37:57 -0300
Subject: [PATCH] (update) tabs' styles

---
 .../templates/address/_tabs.html.eex          | 185 +++++-------------
 .../address_coin_balance/index.html.eex       |   5 +-
 .../templates/address_contract/index.html.eex |   5 +-
 .../index.html.eex                            |   5 +-
 .../index.html.eex                            |   5 +-
 .../address_read_contract/index.html.eex      |   5 +-
 .../templates/address_token/index.html.eex    |   5 +-
 .../address_token_transfer/index.html.eex     |   5 +-
 .../address_transaction/index.html.eex        |   5 +-
 .../block_transaction/index.html.eex          |  34 +---
 .../templates/tokens/holder/index.html.eex    |   5 +-
 .../templates/tokens/inventory/index.html.eex |   4 +-
 .../templates/tokens/overview/_tabs.html.eex  | 103 +++-------
 .../tokens/read_contract/index.html.eex       |   5 +-
 .../templates/tokens/transfer/index.html.eex  |   5 +-
 .../templates/transaction/_tabs.html.eex      |  74 ++-----
 .../index.html.eex                            |   6 +-
 .../templates/transaction_log/index.html.eex  |   4 +-
 .../transaction_token_transfer/index.html.eex |   5 +-
 19 files changed, 118 insertions(+), 352 deletions(-)

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
index f981f75ace..ba29efebac 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
@@ -1,146 +1,57 @@
-<!-- DESKTOP TAB NAV -->
-<ul class="nav nav-tabs card-header-tabs d-none d-lg-inline-flex">
-  <li class="nav-item">
-    <%= link(
-          gettext("Transactions"),
-          class: "nav-link #{tab_status("transactions", @conn.request_path)}",
-          to: address_transaction_path(@conn, :index, @address.hash)
-        ) %>
-  </li>
-
-  <li class="nav-item">
-    <%= link(
-          gettext("Tokens"),
-          class: "nav-link #{tab_status("tokens", @conn.request_path)}",
-          to: address_token_path(@conn, :index, @address.hash),
-          "data-test": "tokens_tab_link"
-        ) %>
-  </li>
-
-  <li class="nav-item"> <%= link(
-          gettext("Internal Transactions"),
-          class: "nav-link #{tab_status("internal_transactions", @conn.request_path)}",
-          "data-test": "internal_transactions_tab_link",
-          to: address_internal_transaction_path(@conn, :index, @address.hash)
-        ) %>
-  </li>
-
-  <li class="nav-item">
-    <%= link(
-          gettext("Coin Balance History"),
-          class: "nav-link #{tab_status("coin_balances", @conn.request_path)}",
-          "data-test": "coin_balance_tab_link",
-          to: address_coin_balance_path(@conn, :index, @address.hash)
-        ) %>
-  </li>
-
-  <%= if BlockScoutWeb.AddressView.validator?(@validation_count) do %>
-    <li class="nav-item">
-      <%= link(
-        gettext("Blocks Validated"),
-        class: "nav-link #{tab_status("validations", @conn.request_path)}",
-        "data-test": "validations_tab_link",
-        to: address_validation_path(@conn, :index, @address.hash)
+<div class="card-tabs">
+  <%= link(
+        gettext("Transactions"),
+        class: "card-tab #{tab_status("transactions", @conn.request_path)}",
+        to: address_transaction_path(@conn, :index, @address.hash)
       ) %>
-    </li>
+  <%= link(
+        gettext("Tokens"),
+        class: "card-tab #{tab_status("tokens", @conn.request_path)}",
+        to: address_token_path(@conn, :index, @address.hash),
+        "data-test": "tokens_tab_link"
+      ) %>
+  <%= link(
+        gettext("Internal Transactions"),
+        class: "card-tab #{tab_status("internal_transactions", @conn.request_path)}",
+        "data-test": "internal_transactions_tab_link",
+        to: address_internal_transaction_path(@conn, :index, @address.hash)
+      ) %>
+  <%= link(
+        gettext("Coin Balance History"),
+        class: "card-tab #{tab_status("coin_balances", @conn.request_path)}",
+        "data-test": "coin_balance_tab_link",
+        to: address_coin_balance_path(@conn, :index, @address.hash)
+      ) %>
+  <%= if BlockScoutWeb.AddressView.validator?(@validation_count) do %>
+    <%= link(
+      gettext("Blocks Validated"),
+      class: "card-tab #{tab_status("validations", @conn.request_path)}",
+      "data-test": "validations_tab_link",
+      to: address_validation_path(@conn, :index, @address.hash)
+    ) %>
   <% end %>
-
   <%= if contract?(@address) do %>
-    <li class="nav-item">
-      <%= link(
-          to: address_contract_path(@conn, :index, @address.hash),
-          class: "nav-link #{tab_status("contracts", @conn.request_path)}") do %>
-          <%= gettext("Code") %>
-
-        <%= if smart_contract_verified?(@address) do %>
-          <i class="far fa-check-circle text-success"></i>
-        <% end %>
+    <%= link(
+        to: address_contract_path(@conn, :index, @address.hash),
+        class: "card-tab #{tab_status("contracts", @conn.request_path)}") do %>
+        <%= gettext("Code") %>
+      <%= if smart_contract_verified?(@address) do %>
+        <i class="far fa-check-circle text-success"></i>
       <% end %>
-    </li>
+    <% end %>
   <% end %>
-
   <%= if has_decompiled_code?(@address) do %>
-    <li class="nav-item">
-      <%= link(
-          to: address_decompiled_contract_path(@conn, :index, @address.hash),
-          class: "nav-link #{tab_status("decompiled_contracts", @conn.request_path)}") do %>
-         <%= gettext("Decompiled code") %>
-      <% end %>
-    </li>
+    <%= link(
+        to: address_decompiled_contract_path(@conn, :index, @address.hash),
+        class: "card-tab #{tab_status("decompiled_contracts", @conn.request_path)}") do %>
+        <%= gettext("Decompiled code") %>
+    <% end %>
   <% end %>
-
   <%= if smart_contract_with_read_only_functions?(@address) do %>
-    <li class="nav-item">
-      <%= link(
-          gettext("Read Contract"),
-          to: address_read_contract_path(@conn, :index, @address.hash),
-          class: "nav-link #{tab_status("read_contract", @conn.request_path)}")%>
-    </li>
+    <%= link(
+        gettext("Read Contract"),
+        to: address_read_contract_path(@conn, :index, @address.hash),
+        class: "card-tab #{tab_status("read_contract", @conn.request_path)}")
+      %>
   <% end %>
-</ul>
-
-<!-- MOBILE DROPDOWN NAV -->
-<ul class="nav nav-tabs card-header-tabs d-lg-none">
-  <li class="nav-item dropdown flex-fill text-center">
-    <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
-      <%= current_tab_name(@conn.request_path) %>
-    </a>
-    <div class="dropdown-menu">
-      <%= link(
-            gettext("Transactions"),
-            class: "dropdown-item #{tab_status("transactions", @conn.request_path)}",
-            to: address_transaction_path(@conn, :index, @address.hash)
-          ) %>
-      <%= link(
-            gettext("Tokens"),
-            class: "dropdown-item  #{tab_status("tokens", @conn.request_path)}",
-            to: address_token_path(@conn, :index, @address.hash)
-          ) %>
-      <%= link(
-            gettext("Internal Transactions"),
-            class: "dropdown-item #{tab_status("internal_transactions", @conn.request_path)}",
-            "data-test": "internal_transactions_tab_link",
-            to: address_internal_transaction_path(@conn, :index, @address.hash)
-          ) %>
-      <%= link(
-            gettext("Coin Balance History"),
-            class: "dropdown-item #{tab_status("coin_balances", @conn.request_path)}",
-            "data-test": "coin_balance_tab_link",
-            to: address_coin_balance_path(@conn, :index, @address.hash)
-          ) %>
-      <%= if validator?(@validation_count) do %>
-        <%= link(
-          gettext("Blocks Validated"),
-          class: "dropdown-item",
-          "data-test": "validations_tab_link",
-          to: address_validation_path(@conn, :index, @address.hash)
-        ) %>
-      <% end %>
-      <%= if contract?(@address) do %>
-        <%= link(
-            to: address_contract_path(@conn, :index, @address.hash),
-            class: "dropdown-item #{tab_status("contracts", @conn.request_path)}") do %>
-          <%= gettext("Code") %>
-
-          <%= if smart_contract_verified?(@address) do %>
-            <i class="far fa-check-circle"></i>
-          <% end %>
-
-          <%= if has_decompiled_code?(@address) do %>
-            <%= link(
-                to: address_decompiled_contract_path(@conn, :index, @address.hash),
-                class: "dropdown-item #{tab_status("contracts", @conn.request_path)}") do %>
-             <%= gettext("Decompiled code") %>
-          <% end %>
-        <% end %>
-        <% end %>
-      <% end %>
-      <%= if smart_contract_with_read_only_functions?(@address) do %>
-        <%= link(
-            gettext("Read Contract"),
-            to: address_read_contract_path(@conn, :index, @address.hash),
-            class: "dropdown-item #{tab_status("read_contract", @conn.request_path)}")%>
-      <% end %>
-    </div>
-  </li>
-</ul>
+</div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
index 60ccf35fce..a41a641fad 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex
@@ -3,10 +3,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body" data-async-listing="<%= @current_path %>">
         <div data-selector="channel-disconnected-message" style="display:none;">
           <div data-selector="reload-button" class="alert alert-danger">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex
index 429e8794d7..560440fb4e 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex
@@ -2,10 +2,7 @@
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
     <div class="card-body">
       <%= if !BlockScoutWeb.AddressView.smart_contract_verified?(@address) do %>
         <%= link(
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_decompiled_contract/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_decompiled_contract/index.html.eex
index e2b2d5d11b..2252db512f 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_decompiled_contract/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_decompiled_contract/index.html.eex
@@ -2,10 +2,7 @@
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
     <%= for {contract, _i} <- Enum.with_index(@address.decompiled_smart_contracts) do %>
       <div class="card-body">
         <h3><%= gettext "Decompiler version" %></h3>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
index b726250c2c..bc7529dcd9 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
@@ -3,10 +3,7 @@
 
   <section data-page="address-internal-transactions">
     <div class="card">
-      <div class="card-header">
-        <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <div data-selector="channel-batching-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-info">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_read_contract/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_read_contract/index.html.eex
index df43211d37..b662dfb652 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_read_contract/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_read_contract/index.html.eex
@@ -3,10 +3,7 @@
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
     <!-- loaded via AJAX -->
     <div class="card-body" data-smart-contract-functions data-hash="<%= to_string(@address.hash) %>" data-url="<%= smart_contract_path(@conn, :index) %>">
       <div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
index 08cd1e3511..bc5aac9f4b 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token/index.html.eex
@@ -3,10 +3,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body">
         <h2 class="card-title"><%= gettext "Tokens" %></h2>
         <%= if Enum.any?(@tokens) do %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
index 40915826b1..389dd2aefb 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
@@ -3,10 +3,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div data-async-load data-async-listing="<%= @current_path %>" class="card-body">
         <h2 class="card-title">
           <span class="text-muted"><%= gettext "Tokens" %></span> / <%= token_name(@token) %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
index 4122e3375e..e78e3589bb 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_transaction/index.html.eex
@@ -4,10 +4,7 @@
 
   <section data-page="address-transactions">
     <div class="card">
-      <div class="card-header">
-        <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
       <div class="card-body" data-async-listing="<%= @current_path %>">
         <div data-selector="channel-disconnected-message" style="display: none;">
           <div data-selector="reload-button" class="alert alert-danger">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
index 09b423d3c2..54aa04d947 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/block_transaction/index.html.eex
@@ -4,32 +4,14 @@
 
   <section>
     <div class="card mb-3">
-      <div class="card-header">
-
-        <!-- DESKTOP TAB NAV -->
-        <ul class="nav nav-tabs card-header-tabs d-none d-lg-inline-flex">
-          <li class="nav-item">
-            <%= link(
-                  gettext("Transactions"),
-                  class: "nav-link active",
-                  to: block_transaction_path(@conn, :index, @conn.params["block_hash_or_number"])
-                ) %>
-          </li>
-        </ul>
-
-        <!-- MOBILE DROPDOWN NAV -->
-        <ul class="nav nav-tabs card-header-tabs d-lg-none">
-          <li class="nav-item dropdown flex-fill text-center">
-            <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><%= gettext "Transactions" %></a>
-            <div class="dropdown-menu">
-              <%= link(
-                    gettext("Transactions"),
-                    class: "dropdown-item active",
-                    to: block_transaction_path(@conn, :index, @conn.params["block_hash_or_number"])
-                  ) %>
-            </div>
-          </li>
-        </ul>
+      <div class="card-tabs">
+        <%=
+          link(
+            gettext("Transactions"),
+            class: "card-tab #{tab_status("transactions", @conn.request_path)}",
+            to: block_transaction_path(@conn, :index, @conn.params["block_hash_or_number"])
+            )
+        %>
       </div>
       <div class="card-body">
         <h2 class="card-title"><%= gettext "Transactions" %></h2>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex
index 9812fcbee4..de2bb9707a 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex
@@ -10,10 +10,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render OverviewView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render OverviewView, "_tabs.html", assigns %>
       <!-- Token Holders -->
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Holders" %></h2>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex
index 8b2fdcb5b7..4eb471e305 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex
@@ -10,9 +10,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render OverviewView, "_tabs.html", assigns %>
-      </div>
+      <%= render OverviewView, "_tabs.html", assigns %>
 
       <div class="card-body">
         <h2 class="card-title"><%= gettext "Inventory" %></h2>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex
index ac7d9fce2a..3a9e9ec11f 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_tabs.html.eex
@@ -1,81 +1,30 @@
-<!-- DESKTOP TAB NAV -->
-<ul class="nav nav-tabs card-header-tabs d-none d-lg-inline-flex">
-  <li class="nav-item">
-    <%= link(
-          gettext("Token Transfers"),
-          class: "nav-link #{tab_status("token_transfers", @conn.request_path)}",
-          to: token_path(@conn, :show, @token.contract_address_hash)
-        ) %>
-  </li>
-
-  <li class="nav-item">
-    <%= link(
-          gettext("Token Holders"),
-          class: "nav-link #{tab_status("token_holders", @conn.request_path)}",
-          "data-test": "token_holders_tab",
-          to: token_holder_path(@conn, :index, @token.contract_address_hash)
-        ) %>
-  </li>
-
+<div class="card-tabs">
+  <%= link(
+        gettext("Token Transfers"),
+        class: "card-tab #{tab_status("token_transfers", @conn.request_path)}",
+        to: token_path(@conn, :show, @token.contract_address_hash)
+      )
+    %>
+  <%= link(
+        gettext("Token Holders"),
+        class: "card-tab #{tab_status("token_holders", @conn.request_path)}",
+        "data-test": "token_holders_tab",
+        to: token_holder_path(@conn, :index, @token.contract_address_hash)
+      )
+    %>
   <%= if display_inventory?(@token) do %>
-    <li class="nav-item">
-      <%= link(
-            gettext("Inventory"),
-            class: "nav-link #{tab_status("inventory", @conn.request_path)}",
-            to: token_inventory_path(@conn, :index, @token.contract_address_hash)
-          ) %>
-    </li>
+    <%= link(
+          gettext("Inventory"),
+          class: "card-tab #{tab_status("inventory", @conn.request_path)}",
+          to: token_inventory_path(@conn, :index, @token.contract_address_hash)
+        )
+    %>
   <% end %>
-
   <%= if smart_contract_with_read_only_functions?(@token) do %>
-    <li class="nav-item">
-      <%= link(
-          gettext("Read Contract"),
-          to: token_read_contract_path(@conn, :index, @token.contract_address_hash),
-          class: "nav-link #{tab_status("read_contract", @conn.request_path)}")%>
-    </li>
+    <%= link(
+        gettext("Read Contract"),
+        to: token_read_contract_path(@conn, :index, @token.contract_address_hash),
+        class: "card-tab #{tab_status("read_contract", @conn.request_path)}")
+      %>
   <% end %>
-</ul>
-
-<!-- MOBILE DROPDOWN NAV -->
-<ul class="nav nav-tabs card-header-tabs d-lg-none">
-  <li class="nav-item dropdown flex-fill text-center">
-    <a class="nav-link active dropdown-toggle"
-       data-toggle="dropdown"
-       href="#"
-       role="button"
-       aria-haspopup="true"
-       aria-expanded="false"
-       >
-        <%= current_tab_name(@conn.request_path) %>
-    </a>
-    <div class="dropdown-menu">
-      <%= link(
-            gettext("Token Transfers"),
-            class: "dropdown-item #{tab_status("token_transfers", @conn.request_path)}",
-            to: token_path(@conn, :show, @token.contract_address_hash)
-          ) %>
-
-      <%= link(
-          gettext("Token Holders"),
-          class: "dropdown-item #{tab_status("token_holders", @conn.request_path)}",
-          to: token_holder_path(@conn, :index, @token.contract_address_hash)
-        ) %>
-
-      <%= if display_inventory?(@token) do %>
-        <%= link(
-              gettext("Inventory"),
-              class: "dropdown-item #{tab_status("inventory", @conn.request_path)}",
-              to: token_inventory_path(@conn, :index, @token.contract_address_hash)
-            ) %>
-      <% end %>
-
-      <%= if smart_contract_with_read_only_functions?(@token) do %>
-          <%= link(
-              gettext("Read Contract"),
-              to: "#",
-              class: "dropdown-item #{tab_status("read_contract", @conn.request_path)}")%>
-      <% end %>
-    </div>
-  </li>
-</ul>
+</div>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/read_contract/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/read_contract/index.html.eex
index 608cc9ca15..5b005ac16a 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/read_contract/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/read_contract/index.html.eex
@@ -10,10 +10,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render OverviewView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render OverviewView, "_tabs.html", assigns %>
       <!-- loaded via AJAX -->
       <div class="card-body" data-smart-contract-functions data-hash="<%= to_string(@token.contract_address.hash) %>" data-url="<%= smart_contract_path(@conn, :index) %>">
         <div class="tile tile-muted text-center">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
index 6aff745531..75f5f1079e 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex
@@ -10,10 +10,7 @@
 
   <section>
     <div class="card">
-      <div class="card-header">
-        <%= render OverviewView, "_tabs.html", assigns %>
-      </div>
-
+      <%= render OverviewView, "_tabs.html", assigns %>
       <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
         <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
         <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
index 135de6c785..fb60b05e19 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/_tabs.html.eex
@@ -1,55 +1,23 @@
-<!-- DESKTOP TAB NAV -->
-<ul class="nav nav-tabs card-header-tabs d-none d-lg-inline-flex">
+<div class="card-tabs">
   <%= if @show_token_transfers do %>
-  <li class="nav-item">
-      <%= link(
-            gettext("Token Transfers"),
-            class: "nav-link #{tab_status("token_transfers", @conn.request_path)}",
-            to: transaction_token_transfer_path(@conn, :index, @transaction)
-          ) %>
-    </li>
-  <% end %>
-  <li class="nav-item">
-    <%= link(
-          gettext("Internal Transactions"),
-          class: "nav-link #{tab_status("internal_transactions", @conn.request_path)}",
-          to: transaction_internal_transaction_path(@conn, :index, @transaction)
-        ) %>
-  </li>
-  <li class="nav-item">
     <%= link(
-          gettext("Logs"),
-          class: "nav-link #{tab_status("logs", @conn.request_path)}",
-          to: transaction_log_path(@conn, :index, @transaction),
-          "data-test": "transaction_logs_link"
-        ) %>
-  </li>
-</ul>
-
-<!-- MOBILE DROPDOWN NAV -->
-<ul class="nav nav-tabs card-header-tabs d-lg-none">
-  <li class="nav-item dropdown flex-fill text-center">
-    <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><%= current_tab_name(@conn.request_path) %></a>
-    <div class="dropdown-menu">
-      <%= if @show_token_transfers do %>
-        <%= link(
-              gettext("Token Transfers"),
-              class: "dropdown-item #{tab_status("token_transfers", @conn.request_path)}",
-              to: transaction_token_transfer_path(@conn, :index, @transaction),
-              "data-test": "transaction_token_transfer_link"
-            ) %>
-       <% end %>
-      <%= link(
-            gettext("Internal Transactions"),
-            class: "dropdown-item #{tab_status("internal_transactions", @conn.request_path)}",
-            to: transaction_internal_transaction_path(@conn, :index, @transaction)
-          ) %>
-          <%= link(
-                gettext("Logs"),
-                class: "dropdown-item #{tab_status("logs", @conn.request_path)}",
-                to: transaction_log_path(@conn, :index, @transaction),
-                "data-test": "transaction_logs_link"
-          ) %>
-    </div>
-  </li>
-</ul>
+          gettext("Token Transfers"),
+          class: "card-tab #{tab_status("token_transfers", @conn.request_path)}",
+          to: transaction_token_transfer_path(@conn, :index, @transaction)
+        )
+      %>
+  <% end %>
+  <%= link(
+        gettext("Internal Transactions"),
+        class: "card-tab #{tab_status("internal_transactions", @conn.request_path)}",
+        to: transaction_internal_transaction_path(@conn, :index, @transaction)
+      )
+    %>
+  <%= link(
+        gettext("Logs"),
+        class: "card-tab #{tab_status("logs", @conn.request_path)}",
+        to: transaction_log_path(@conn, :index, @transaction),
+        "data-test": "transaction_logs_link"
+      )
+    %>
+</div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
index d6c8f38f51..bb7c0f42ab 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex
@@ -1,11 +1,7 @@
 <section class="container">
   <%= render BlockScoutWeb.TransactionView, "overview.html", assigns %>
-
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Internal Transactions" %></h2>
       <%= if Enum.count(@internal_transactions) > 0 do %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
index fe55ab0d42..596d2e32b6 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_log/index.html.eex
@@ -2,9 +2,7 @@
   <%= render BlockScoutWeb.TransactionView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
-    </div>
+    <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
 
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Logs" %></h2>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
index 6dd47c7ea9..74cb6cb4fd 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction_token_transfer/index.html.eex
@@ -2,10 +2,7 @@
   <%= render BlockScoutWeb.TransactionView, "overview.html", assigns %>
 
   <div class="card">
-    <div class="card-header">
-      <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
-    </div>
-
+    <%= render BlockScoutWeb.TransactionView, "_tabs.html", assigns %>
     <div class="card-body">
       <h2 class="card-title"><%= gettext "Token Transfers" %></h2>
       <%= if Enum.any?(@token_transfers) do %>