fix(showcase): responsive scrolls (#986)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

apps/showcase/src/app/app.component.html

@@ -4,7 +4,8 @@
     <div class="header-icon">
       <img src="assets/otter-sticker.svg" width="48" height="48" alt="Otter logo" />
     </div>
-    Otter Showcase
+    <div class="d-block d-sm-none">Otter</div>
+    <div class="d-none d-sm-block">Otter Showcase</div>
   </div>
 </header>
 <div class="container">

apps/showcase/src/app/home/home.style.scss

@@ -1,3 +1,6 @@
 o3r-home {
-
+  .otter-logo {
+    aspect-ratio: 1 / 1;
+    max-width: 100%;
+  }
 }

apps/showcase/src/app/home/home.template.html

@@ -2,5 +2,5 @@
   <h1>Otter</h1>
   <p>This is a showcase application.</p>
   <p>You can find examples of Otter features with some explanations.</p>
-  <img width="500" height="500" [src]="'otter-a.svg' | dynamicContent">
+  <img width="500" [src]="'otter-a.svg' | dynamicContent" class="otter-logo">
 </div>

apps/showcase/src/components/showcase/sdk/sdk-pres.style.scss

@@ -2,4 +2,9 @@ o3r-sdk-pres {
 	.table-container {
     min-height: 33rem;
   }
+
+  .scroll-container {
+    width: 100%;
+    overflow-x: auto;
+  }
 }

apps/showcase/src/components/showcase/sdk/sdk-pres.template.html

@@ -42,7 +42,7 @@
           </div>
         </div>
       </div>
-      <div class="table-container">
+      <div class="table-container scroll-container">
         <table class="table table-striped">
           <thead>
           <tr>
@@ -70,20 +70,21 @@
           </tbody>
         </table>
       </div>
+      <div class="scroll-container">
+        <div class="d-flex justify-content-between p-2">
+          <ngb-pagination
+            [collectionSize]="totalPetsAmount()"
+            [page]="currentPage()" (pageChange)="currentPage.set($event)"
+            [pageSize]="pageSize()"
+            [maxSize]="10"
+          ></ngb-pagination>
 
-      <div class="d-flex justify-content-between p-2">
-        <ngb-pagination
-          [collectionSize]="totalPetsAmount()"
-          [page]="currentPage()" (pageChange)="currentPage.set($event)"
-          [pageSize]="pageSize()"
-          [maxSize]="10"
-        ></ngb-pagination>
-
-        <select class="form-select w-auto" name="pageSize" [ngModel]="pageSize()" (ngModelChange)="pageSize.set($event)">
-          <option [ngValue]="10">10 items per page</option>
-          <option [ngValue]="50">50 items per page</option>
-          <option [ngValue]="100">100 items per page</option>
-        </select>
+          <select class="form-select w-auto" name="pageSize" [ngModel]="pageSize()" (ngModelChange)="pageSize.set($event)">
+            <option [ngValue]="10">10 items per page</option>
+            <option [ngValue]="50">50 items per page</option>
+            <option [ngValue]="100">100 items per page</option>
+          </select>
+        </div>
       </div>
     </form>
   </div>

apps/showcase/src/components/utilities/scroll-back-top/scroll-back-top-pres.style.scss

@@ -1,7 +1,7 @@
 o3r-scroll-back-top-pres {
 	position: fixed;
-  bottom: 2rem;
-  right: 2rem;
+  bottom: 0;
+  right: 0;
   opacity: .5;
   z-index: 1021;