(fix) blocks margin

apps/block_scout_web/assets/css/_helpers.scss

@@ -0,0 +1,23 @@
+.pr-0-md {
+  padding-right: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-right: 15px !important;
+  }
+}
+
+.pl-0-md {
+  padding-left: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-left: 15px !important;
+  }
+}
+
+.card-mr-50-md {
+  margin-right: $common-container-margin;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}

apps/block_scout_web/assets/css/app.scss

@@ -64,6 +64,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "typography";
 @import "tooltip";
 @import "code";
+@import "helpers";
 @import "elements";
 @import "forms";
 @import "components/panels";

apps/block_scout_web/assets/css/components/_address-overview.scss

@@ -25,7 +25,18 @@
 
 .address-overview {
   .card-section {
-    margin-bottom: 3rem;
+    margin-bottom: $common-container-margin;
+
+    &:first-child {
+
+      .card {
+        margin-right: $common-container-margin;
+
+        @include media-breakpoint-down(md) {
+          margin-right: 0;
+        }
+      }
+    }
   }
 
   .card {

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

@@ -11,7 +11,7 @@ $card-background-1-text-color: #fff !default;
   border-radius: $card-default-border-radius;
   border: none;
   box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
-  margin-bottom: 3rem;
+  margin-bottom: $common-container-margin;
 }
 
 .card-background-1 {

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -2,6 +2,7 @@ $primary: #262d62;
 $secondary: #687bf6;
 $tertiary: #687bf6;
 
-$base-border-color: #e2e5ec !default;
+$dashboard-line-color-price: #8286a9 !default;
 
-$dashboard-line-color-price: #8286a9;
+$base-border-color: #e2e5ec !default;
+$common-container-margin: 50px !default;

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

@@ -1,7 +1,7 @@
 <section class="address-overview" data-page="address-details" data-page-address-hash="<%= @address.hash %>">
   <div class="row">
     <!-- Address details -->
-    <div class="card-section col-md-12 col-lg-8">
+    <div class="card-section col-md-12 col-lg-8 pr-0-md">
       <div class="card">
         <div class="card-body">
           <h1 class="card-title">
@@ -123,7 +123,7 @@
       </div>
     </div>
     <!-- Balance -->
-    <div class="card-section col-md-12 col-lg-4" data-selector="balance-card">
+    <div class="card-section col-md-12 col-lg-4 pl-0-md" data-selector="balance-card">
       <%= render BlockScoutWeb.AddressView, "_balance_card.html", conn: @conn, address: @address, exchange_rate: @exchange_rate, coin_balance_status: @coin_balance_status %>
     </div>
 

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

@@ -1,8 +1,8 @@
 <section>
   <div class="row">
-    <div class="col-md-12 col-lg-8">
+    <div class="col-md-12 col-lg-8 pr-0-md">
       <!-- Block Details -->
-      <div class="card">
+      <div class="card card-mr-50-md">
         <div class="card-body">
           <h1 class="card-title" data-test="detail_type">
             <%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
@@ -111,7 +111,7 @@
       </div>
     </div>
 
-    <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column">
+    <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column pl-0-md">
 
       <!-- Validator -->
       <div class="card card-background-1 flex-grow-1">

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

@@ -3,9 +3,9 @@
 <% status = transaction_status(@transaction) %>
 <section data-page="transaction-details" data-page-transaction-hash="<%= @transaction %>">
   <div class="row">
-    <div class="col-md-12 col-lg-8">
+    <div class="col-md-12 col-lg-8 pr-0-md">
       <!-- Transaction Details -->
-      <div class="card">
+      <div class="card card-mr-50-md">
         <div class="card-body">
           <h1 class="card-title">
             <%= gettext "Transaction Details" %>
@@ -170,7 +170,7 @@
     <%= cond do %>
       <% erc20_token_transfer = assigns[:token_transfers] && erc20_token_transfer(@transaction, @token_transfers) -> %>
 
-        <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column">
+        <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column pl-0">
         <!-- Value -->
         <div class="card card-background-1 flex-grow-1">
           <div class="card-body card-body-flex-column-space-between">
@@ -200,7 +200,7 @@
           </div>
         </div>
       <% true -> %>
-        <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column">
+        <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column pl-0-md">
         <!-- Value -->
         <div class="card card-background-1 flex-grow-1">
           <div class="card-body card-body-flex-column-space-between">