[FIX] website: dynamic snippet products overflows on mobile

Steps:
- Install eCommerce
- Go to "Website" > "Go to Website"
- Click Edit
- Add the Dynamic Products block with a template and a category
- Save
- Switch to mobile view

Bug:
The right arrow of the block overflows and makes it possible to scroll
the entire view sideways.

Explanation:
This commit puts back prev and next arrows onto the carousel. It also
changes their design to be more visible over the content. The arrows are
now smaller and displayed in clickable gray circles.

opw:2415187

closes odoo/odoo#64274

X-original-commit: a5d7a1a6f3cf82610802ad84a9ae1baaa3f58e15
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
Signed-off-by: backspac <backspac@users.noreply.github.com>

addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss

@@ -1,13 +1,11 @@
 .s_dynamic {
   .carousel-control-prev, .carousel-control-next {
     position: absolute;
-    text-shadow: 0px 0px 3px #343A40;
     width: 4rem;
-  }
-  .carousel-control-prev{
-    left: -4rem
-  }
-  .carousel-control-next{
-    right: -4rem
+
+    > span.fa {
+      color: gray('700');
+      background: radial-gradient($white 50%, transparent 50%);
+    }
   }
 }

addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml

@@ -23,11 +23,11 @@
             </div>
             <!-- Controls -->
             <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-slide="prev" role="button" aria-label="Previous" title="Previous">
-                <span class="fa fa-chevron-left fa-2x text-white"/>
+                <span class="fa fa-chevron-circle-left fa-2x"/>
                 <span class="sr-only">Previous</span>
             </a>
             <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-slide="next" role="button" aria-label="Next" title="Next">
-                <span class="fa fa-chevron-right fa-2x text-white"/>
+                <span class="fa fa-chevron-circle-right fa-2x"/>
                 <span class="sr-only">Next</span>
             </a>
         </div>