ENGCOM-7264: Fix widget recent view product not fit in mobile view #27572

 - Merge Pull Request #27572 from mrtuvn/magento2:27058-fix-recent-view-product-fit-mobile
 - Merged commits:
   1. d7cf188
   2. 9c81433
   3. 4b64f33
   4. 5f0c02b
   5. 581ab1f
   6. a4935e3
   7. ce431d3

Author: magento-engcom-team

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less

@@ -25,7 +25,7 @@
     .block.widget {
         .products-grid .product-item {
             margin-left: 2%;
-            width: calc(~'(100% - 2%)/2');
+            width: calc(~'(100% - 2%) / 2');
 
             &:nth-child(2n + 1) {
                 margin-left: 0;
@@ -63,6 +63,34 @@
 //  Mobile
 //  _____________________________________________
 
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+    .sidebar .block-viewed-products-grid {
+        .products-grid {
+            .product-item {
+                margin-left: 2%;
+                width: calc(~'(100% - 2%) / 2');
+
+                &:nth-child(2n + 1) {
+                    margin-left: 0;
+                }
+            }
+
+            .product-item-photo {
+                display: block;
+                position: relative;
+            }
+
+            .product-item-details {
+                margin: 0;
+            }
+
+            .product-item-info {
+                text-align: center;
+            }
+        }
+    }
+}
+
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
     .block.widget .products-grid .product-item,
     .page-layout-1column .block.widget .products-grid .product-item,
@@ -72,7 +100,7 @@
 
     .page-layout-1column .block.widget .products-grid .product-item {
         margin-left: 2%;
-        width: calc(~'(100% - 4%)/3');
+        width: calc(~'(100% - 4%) / 3');
 
         &:nth-child(3n + 1) {
             margin-left: 0;
@@ -101,7 +129,7 @@
 
     .page-layout-1column .block.widget .products-grid .product-item {
         margin-left: 2%;
-        width: calc(~'(100% - 6%)/4');
+        width: calc(~'(100% - 6%) / 4');
 
         &:nth-child(3n + 1) {
             margin-left: 2%;
@@ -115,6 +143,20 @@
     .page-layout-3columns .block.widget .products-grid .product-item {
         width: 100%/2;
     }
+
+    .sidebar .block.widget .pager {
+        .item:not(.pages-item-next):not(.pages-item-previous) {
+            &:extend(.abs-no-display-desktop all);
+        }
+
+        .pages-item-next {
+            padding: 0;
+
+            .action {
+                margin: 0;
+            }
+        }
+    }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
@@ -124,7 +166,7 @@
 
     .page-layout-1column .block.widget .products-grid .product-item {
         margin-left: 2%;
-        width: calc(~'(100% - 8%)/5');
+        width: calc(~'(100% - 8%) / 5');
 
         &:nth-child(4n + 1) {
             margin-left: 2%;
@@ -153,19 +195,3 @@
         }
     }
 }
-
-.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
-    .sidebar .block.widget .pager {
-        .item:not(.pages-item-next):not(.pages-item-previous) {
-            &:extend(.abs-no-display-desktop all);
-        }
-
-        .pages-item-next {
-            padding: 0;
-
-            .action {
-                margin: 0;
-            }
-        }
-    }
-}