Merge branch 'fix/scrollbar-position' into 'dev'

fix(ui): scrollbar position

See merge request !734

src/app/annuaire/annuaire-header/annuaire-header.component.scss

 @import 'search';
+@import 'color';
 
 .searchContainer {
+  max-width: 980px;
+  margin: auto;
   padding-top: 24px;
   padding-bottom: 16px;
+  background-color: $white;
+  position: sticky;
+  top: 0;
 }

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;
   }

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} {

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%;

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;
+}

src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss

+@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;
   }

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;
 }

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;
   }
 

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>

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;
     }
   }
 }

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;

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;
 }

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;

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 {