make Tokens header more compact

CHANGELOG.md

@@ -12,7 +12,7 @@
 - [#3335](https://github.com/poanetwork/blockscout/pull/3335) - MarketCap calculation: check that ETS tables exist before inserting new data or lookup from the table
 
 ### Chore
-
+- [#3343](https://github.com/poanetwork/blockscout/pull/3343) - Make (Bridged) Tokens' list page's header more compact
 
 
 ## 3.3.3-beta

apps/block_scout_web/assets/css/components/_card.scss

@@ -281,4 +281,16 @@ $card-tab-icon-color-active: #fff !default;
   padding: 6px 8px !important;
   height: 31px !important;
   font-size: 11px;
+}
+
+.tokens-description {
+  @media (min-width: 992px) {
+    display: inline-block;
+  }
+}
+
+.tokens-top-pagination-container-wrapper {
+  @media (min-width: 992px) {
+    float: right;
+  }
 }

apps/block_scout_web/lib/block_scout_web/templates/bridged_tokens/index.html.eex

@@ -2,9 +2,12 @@
   <div class="card">
     <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
       <h1 class="card-title"><%= gettext "Bridged Tokens" %></h1>
-	  <p class="card-subtitle">List of the tokens bridged through OmniBridge <span class="bridged-token-label omni">OMNI</span> and Arbitrary Message Bridge <span class="bridged-token-label amb">AMB</span> extensions</p>
-
-    <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+	  <div>
+	  	<p class="card-subtitle tokens-description">List of the tokens bridged through OmniBridge <span class="bridged-token-label omni">OMNI</span> and Arbitrary Message Bridge <span class="bridged-token-label amb">AMB</span> extensions</p>
+	  	<div class="tokens-top-pagination-container-wrapper">
+		  <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+	  	</div>
+	  </div>
 
     <div class="addresses-table-container">
       <div class="stakes-table-container">

apps/block_scout_web/lib/block_scout_web/templates/tokens/index.html.eex

@@ -1,9 +1,11 @@
 <section class="container">
   <div class="card">
     <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
-      <h1 class="card-title"><%= gettext "Tokens" %></h1>
+      <h1 class="card-title tokens-description"><%= gettext "Tokens" %></h1>
 
-    <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+	<div class="tokens-top-pagination-container-wrapper">
+    	<%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+	</div>
 
     <div class="addresses-table-container">
       <div class="stakes-table-container">