Merge pull request #2765 from YegorSan/fix-mobile-view

Fix width issue for cards in mobile view for Transaction Details page.

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [#2642](https://github.com/poanetwork/blockscout/pull/2642) - add ERC721 coin instance page
 
 ### Fixes
+- [#2765](https://github.com/poanetwork/blockscout/pull/2765) - fixed width issue for cards in mobile view for Transaction Details page
 - [#2753](https://github.com/poanetwork/blockscout/pull/2753) - fix nft token instance images
 - [#2750](https://github.com/poanetwork/blockscout/pull/2750) - fixed contract buttons color for NFT token instance on each theme
 - [#2746](https://github.com/poanetwork/blockscout/pull/2746) - fixed wrong alignment in logs decoded view

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

@@ -34,7 +34,9 @@ $card-tab-icon-color-active: #fff !default;
 .card-background-1 {
   background-color: $card-background-1;
   color: $card-background-1-text-color;
-
+  @include media-breakpoint-down(sm) {
+    margin-left: 15px;
+  }
   a:not(.dropdown-item),
   a:not(.dropdown-item):hover {
     color: $card-background-1-text-color;
@@ -249,3 +251,9 @@ $card-tab-icon-color-active: #fff !default;
     }
   }
 }
+
+.mob-transaction {
+  @include media-breakpoint-down(sm) {
+    margin-left: 15px!important;
+  } 
+}

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

@@ -227,7 +227,7 @@
       </div>
     <% end %>
       <!-- Gas -->
-      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0">
+      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0 mob-transaction">
         <div class="card-body card-body-flex-column-space-between">
           <h2 class="card-title balance-card-title"> <%= gettext "Gas" %> </h2>
           <div class="text-right">