banner stats issues on sm resolutions, transactions title issue

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

@@ -42,6 +42,12 @@ $card-tab-icon-color-active: #20b760 !default;
   line-height: 1.2rem;
   margin-bottom: 2rem;
 
+  &.lg-card-title {
+    @media (max-width: 374px) {
+      font-size: 13px;
+    }
+  }
+
   &.margin-bottom-md {
     margin-bottom: 25px;
   }

apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@@ -80,6 +80,12 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
       flex-direction: row;
     }
 
+    @media (max-width: 599px) {
+      padding-top: 0;
+      padding-bottom: 0;
+      flex-direction: column;
+    }
+
     &::before {
       border-radius: 2px;
       content: "";
@@ -107,6 +113,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     line-height: 1.2;
     margin: 0 0 5px;
 
+    @media (max-width: 374px) {
+      position: relative;
+      top: -2px;
+    }
+
     @include media-breakpoint-down(md) {
       margin: 0 5px 0 0;
     }
@@ -140,13 +151,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
     height: auto;
     justify-content: flex-start;
     margin-left: 0;
-    margin-top: 15px;
     max-width: 100%;
     padding: 20px 0 20px 20px;
     width: 250px;
     box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
   }
 
+  @include media-breakpoint-down(lg) {
+    margin-top: 15px;
+  }
+
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
@@ -186,4 +200,17 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   }
 
   @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color);
+
+  .dashboard-banner-network-stats-item {
+    @media (max-width: 374px) {
+      padding-left: calc(0.6rem + 4px);
+      padding-right: 0.5rem;
+    }
+  }
+
+  .dashboard-banner-network-stats-value {
+    @media (max-width: 374px) {
+      font-size: 0.9rem;
+    }
+  }
 }

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -105,7 +105,7 @@
   <div class="card card-chain-transactions">
     <div class="card-body">
       <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
-      <h2 class="card-title"><%= gettext "Transactions" %></h2>
+      <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">
           <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>