diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss
index 2e2cba08a9..4c34e4a31b 100644
--- a/apps/block_scout_web/assets/css/components/_card.scss
+++ b/apps/block_scout_web/assets/css/components/_card.scss
@@ -67,7 +67,7 @@ $card-background-1-text-color: #fff !default;
}
.card-subtitle {
- color: #aaa;
+ color: #333;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
diff --git a/apps/block_scout_web/assets/css/components/_pagination_container.scss b/apps/block_scout_web/assets/css/components/_pagination_container.scss
index 0ff6d96335..a97b338c29 100644
--- a/apps/block_scout_web/assets/css/components/_pagination_container.scss
+++ b/apps/block_scout_web/assets/css/components/_pagination_container.scss
@@ -17,6 +17,10 @@ $pagination-page-link-color-active: #fff !default;
display: flex;
justify-content: space-between;
+ @include media-breakpoint-down(sm) {
+ flex-direction: column;
+ }
+
&.position-bottom {
padding-top: 30px;
}
@@ -33,6 +37,10 @@ $pagination-page-link-color-active: #fff !default;
font-weight: 600;
line-height: 1.2;
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 15px;
+ }
+
select {
margin: 0 10px;
}
@@ -43,7 +51,7 @@ $pagination-page-link-color-active: #fff !default;
padding: 0;
.page-item {
- margin: 0 10px 0 0;
+ margin: 0 5px 0 0;
&:last-child {
margin-right: 0;
@@ -69,9 +77,11 @@ $pagination-page-link-color-active: #fff !default;
font-weight: 600;
height: 24px;
margin: 0;
- padding: 0 10px;
+ padding: 0 8px;
position: relative;
user-select: none;
+ text-align: center;
+ white-space: nowrap;
&:not(.no-hover):hover {
@include pagination-container-base($pagination-page-link-background-active, $pagination-page-link-color-active);
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
index 7a0c24a5d7..080102d2c9 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex
@@ -1,8 +1,6 @@
<%= gettext "Showing " %>
@@ -14,6 +12,8 @@
<%= Cldr.Number.to_string!(@cur_page_number, format: "#,###)") %>
<%= gettext "Addresses" %>
<%= gettext("%{block_type}s", block_type: @block_type) %>
+
+ <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", prev_page_path: "#", next_page_path: "#", cur_page_number: "1", show_pagination_limit: true %>
+