From 74843ccdb5afcf031202b15581b8ca79028d85a1 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 21 Feb 2024 12:25:36 +0000
Subject: [PATCH] fix(ui): scrollbar position

---
 .../annuaire-header.component.scss            |  6 ++++++
 src/app/annuaire/annuaire.component.scss      |  3 ---
 .../result-list/result-list.component.scss    |  7 +++----
 .../footer-form/footer-form.component.scss    |  1 -
 .../form/form-view/form-view.component.scss   | 20 +++++++++++++------
 .../navigation/navigation.component.scss      |  4 ++++
 .../orientation-form-view.component.scss      | 19 ++++++++++--------
 src/app/profile/profile.component.scss        |  6 +++---
 .../structure-edition-summary.component.html  |  6 ++----
 .../structure-edition-summary.component.scss  | 18 ++++++++++-------
 .../structures-management.component.scss      |  1 +
 .../components/card/card.component.scss       | 14 +------------
 src/assets/scss/_layout.scss                  |  1 -
 src/styles.scss                               |  1 +
 14 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.scss b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
index 0670a0ffa..f12a2d2d5 100644
--- a/src/app/annuaire/annuaire-header/annuaire-header.component.scss
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
@@ -1,6 +1,12 @@
 @import 'search';
+@import 'color';
 
 .searchContainer {
+  max-width: 980px;
+  margin: auto;
   padding-top: 24px;
   padding-bottom: 16px;
+  background-color: $white;
+  position: sticky;
+  top: 0;
 }
diff --git a/src/app/annuaire/annuaire.component.scss b/src/app/annuaire/annuaire.component.scss
index 53633e313..a17cc1389 100644
--- a/src/app/annuaire/annuaire.component.scss
+++ b/src/app/annuaire/annuaire.component.scss
@@ -2,9 +2,6 @@
 @import 'breakpoint';
 
 .annuaire-container {
-  padding-inline: 6rem;
-  margin: auto;
-  max-width: $content-desktop-width;
   @media #{$tablet} {
     padding-inline: 0.5rem;
   }
diff --git a/src/app/annuaire/result-list/result-list.component.scss b/src/app/annuaire/result-list/result-list.component.scss
index 79527a574..f25302418 100644
--- a/src/app/annuaire/result-list/result-list.component.scss
+++ b/src/app/annuaire/result-list/result-list.component.scss
@@ -4,10 +4,10 @@
 @import 'typography';
 
 .results {
-  margin-top: 1rem;
-  height: calc(100vh - $footer-height - $header-height - 7rem);
   overflow-y: auto;
-  overflow-anchor: none;
+  margin: 1rem auto auto auto;
+  max-width: 980px;
+  padding-bottom: 1rem;
 
   @media #{$phone} {
     height: unset;
@@ -77,7 +77,6 @@
   }
 
   .notConnected {
-    height: auto;
     text-align: center;
     padding: 70px 40px;
     @media #{$tablet} {
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 63e1650f5..bdf40933a 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -7,7 +7,6 @@
   justify-content: center;
   gap: 1rem;
   padding: 32px 0 40px 0;
-  margin: 0 96px;
   border-top: 1px solid $grey-7;
   @media #{$tablet} {
     margin: 0 2%;
diff --git a/src/app/form/form-view/form-view.component.scss b/src/app/form/form-view/form-view.component.scss
index 5c38385da..e4fcd10c0 100644
--- a/src/app/form/form-view/form-view.component.scss
+++ b/src/app/form/form-view/form-view.component.scss
@@ -4,23 +4,25 @@
 @import 'typography';
 
 :host {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .formView {
-  height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: $grey-10;
+  flex: 1;
 }
 
 ::ng-deep.page {
   display: flex;
   place-content: center;
   height: 100%;
-  margin: 16px 96px;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
+  margin: auto;
+  padding-block: 16px;
+  max-width: 980px;
+  width: 100%;
   @media #{$tablet} {
     margin: 0px 0.5rem;
     width: auto;
@@ -90,3 +92,9 @@
   @include font-regular-18;
   color: $grey-4-5-1;
 }
+
+app-footer-form {
+  position: sticky;
+  bottom: 0;
+  background: $white;
+}
diff --git a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
index 507e88817..6be85e259 100644
--- a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
+++ b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
@@ -1,9 +1,13 @@
+@import 'color';
+
 .footerForm {
   display: flex;
   justify-content: center;
   gap: 2rem;
   padding-top: 2rem;
   padding-bottom: 40px;
+  border-top: 1px solid $grey-7;
+  width: 100%;
   @media print {
     display: none !important;
   }
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 18254ef8f..d94a71fe7 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -4,19 +4,19 @@
 @import 'typography';
 
 :host {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .orientation {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1;
   .container {
     box-sizing: border-box;
-
     height: 100%;
     margin: auto;
-    overflow-y: auto;
 
     padding: 2rem 3rem;
     @media #{$tablet} {
@@ -65,9 +65,12 @@ div.titleform {
   display: flex;
   flex-direction: column;
   gap: 40px;
+  width: 100%;
+  max-width: 600px;
+}
 
-  width: 600px;
-  @media #{$tablet} {
-    width: auto;
-  }
+app-navigation {
+  position: sticky;
+  bottom: 0;
+  background: $white;
 }
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index 953f8df51..48ee89d93 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -21,18 +21,18 @@
 }
 
 section {
-  width: $content-desktop-width;
+  width: 100%;
+  max-width: 980px;
   display: flex;
   gap: 2em;
   flex-direction: column;
   align-items: flex-start;
   box-sizing: border-box;
-  padding: 2rem;
   background: $white;
   border: 1px solid $grey-6;
   border-radius: 8px;
+  padding: 2rem;
   @media #{$tablet} {
-    width: 100%;
     padding: 1.5rem;
   }
 
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index 4cc10cfa9..ae04a0fc7 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -779,26 +779,24 @@
       </div>
     </section>
   </div>
-
   <div class="footer">
     <ng-container *ngIf="isUpdateStructure">
       <p *ngIf="!isFormValid()" class="warning">
         Vous pourrez valider après avoir renseigné l’intégralité des champs obligatoires.
       </p>
       <div class="buttons">
-        <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" />
+        <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
         <app-button
           [variant]="'primary'"
           [label]="'Valider'"
           [disabled]="!isFormValid()"
-          [size]="'small'"
           (action)="updateStructureUpdateDate()"
         />
       </div>
     </ng-container>
     <ng-container *ngIf="!isUpdateStructure">
       <div class="buttons">
-        <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" />
+        <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
       </div>
     </ng-container>
   </div>
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
index a0475cf54..546f35172 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
@@ -6,20 +6,18 @@
 .container {
   margin: 2rem auto auto auto;
   max-width: 980px;
-  height: calc(100vh - $header-height - $footer-height - 2rem); //2rem are needed because of 1rem margin
+  // height: calc(100vh - $header-height - $footer-height - 2rem); //2rem are needed because of 1rem margin
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
   .scroll {
-    height: 90%;
-    overflow-y: scroll;
     overflow-x: hidden;
     position: sticky; // to properly display hours
-    padding-right: 40px;
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    padding-bottom: 32px;
 
     .header {
       display: flex;
@@ -103,7 +101,13 @@
     }
   }
   .footer {
-    border-top: 1px solid $grey-5;
+    border-top: 1px solid $grey-7;
+    position: sticky;
+    bottom: 0;
+    background: $white;
+    margin: auto;
+    max-width: 980px;
+    width: 100%;
     p.warning {
       color: $orange-warning;
       margin: 1rem;
@@ -112,8 +116,8 @@
       display: flex;
       justify-content: center;
       gap: 24px;
-      padding-top: 1rem;
-      padding-bottom: 8px;
+      padding-top: 2rem;
+      padding-bottom: 40px;
     }
   }
 }
diff --git a/src/app/profile/structures-management/structures-management.component.scss b/src/app/profile/structures-management/structures-management.component.scss
index 7e7730c26..44a007d48 100644
--- a/src/app/profile/structures-management/structures-management.component.scss
+++ b/src/app/profile/structures-management/structures-management.component.scss
@@ -10,6 +10,7 @@
   width: 100%;
   margin: 0 auto;
   gap: 2rem;
+  padding-top: 16px;
 
   .header {
     display: flex;
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index c6b7971b7..286a293e6 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -84,17 +84,5 @@
 }
 
 .orientation {
-  flex-direction: row !important;
-  align-items: center;
-
-  .left {
-    display: flex;
-    width: 70%;
-  }
-
-  .right {
-    @media #{$large-phone} {
-      margin-left: unset;
-    }
-  }
+  gap: 16px;
 }
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 8aec0e8f5..716e30d90 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,6 +3,5 @@ $footer-height: 56px;
 $header-height-phone: 70px;
 $footer-height-phone: 75px;
 $header-post-height: 180px;
-$content-desktop-width: 980px;
 $orientation-progressBarAndButtons: 119px;
 $progress-bar-height: 49px;
diff --git a/src/styles.scss b/src/styles.scss
index 7f05c22da..35fff78d8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -110,6 +110,7 @@ a {
 .content-container {
   margin: 0;
   padding-top: 16px;
+  padding-bottom: 16px;
   width: 100%;
   box-sizing: border-box;
   &.medium-pt {
-- 
GitLab