Finalize fixing tx mobile view: left margin

CHANGELOG.md

@@ -7,7 +7,7 @@
 
 ### Fixes
 - [#3509](https://github.com/poanetwork/blockscout/pull/3509) - Fix QR code tooltip appearance in mobile view
-- [#3507](https://github.com/poanetwork/blockscout/pull/3507) - Fix left margin of balance card in mobile view
+- [#3507](https://github.com/poanetwork/blockscout/pull/3507), [#3510](https://github.com/poanetwork/blockscout/pull/3510) - Fix left margin of balance card in mobile view
 - [#3506](https://github.com/poanetwork/blockscout/pull/3506) - Fix token trasfer's tile styles: prevent overlapping of long names
 - [#3505](https://github.com/poanetwork/blockscout/pull/3505) - Fix Staking DApp first loading
 - [#3433](https://github.com/poanetwork/blockscout/pull/3433) - Token balances and rewards tables deadlocks elimination

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

@@ -264,6 +264,12 @@ $card-tab-icon-color-active: #fff !default;
   }
 }
 
+.mob-transaction {
+  @include media-breakpoint-down(sm) {
+    margin-left: 15px!important;
+  } 
+}
+
 .implementation-container {
   margin-top: 10px;
 }

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

@@ -199,7 +199,7 @@
       <% {type, %{token_transfers: token_transfers} = transaction_with_transfers} when is_list(token_transfers) and token_transfers != [] -> %>
         <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 card-background-1 mob-transaction flex-grow-1">
           <div class="card-body card-body-flex-column-space-between">
             <%= if @transaction.value && @transaction.value.value != Decimal.new(0) do %>
               <h2 class="card-title balance-card-title"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
@@ -251,9 +251,9 @@
           </div>
         </div>
       <% _ -> %>
-        <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column pl-0-md">
+        <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 card-background-1 mob-transaction flex-grow-1">
           <div class="card-body card-body-flex-column-space-between">
             <h2 class="card-title balance-card-title"><%= gettext "Ether" %> <%= gettext "Value" %></h2>
             <div class="text-right">
@@ -271,7 +271,7 @@
       </div>
     <% end %>
       <!-- Gas -->
-      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0">
+      <div class="card mob-transaction flex-grow-1 ml-0 ml-md-5 ml-lg-0">
         <div class="card-body card-body-flex-column-space-between">
           <h2 class="card-title balance-card-title"> <%= gettext "Gas" %> </h2>
           <div class="text-right">