Fine vertical layout scroll and overflow over all /user routes #12519

Author: sambaptista

client/app/profile/components/family-member/family-member.component.html

@@ -53,7 +53,7 @@ <h2 class="mat-font-title-lg">Coordonnées</h2>
                 placeholder="Genre"
                 (selectionChange)="update()"
             />
-            <app-address [form]="form" [vertical]="true" (addressChange)="update()" />
+            <app-address [form]="form" (addressChange)="update()" />
             <mat-form-field>
                 <mat-label>Téléphone fixe</mat-label>
                 <input matInput formControlName="phone" (change)="update()" />

client/app/shared/components/address/address.component.html

@@ -1,32 +1,28 @@
-<div class="nat-vertical" [formGroup]="form()">
+<form class="nat-vertical" [formGroup]="form()">
     <mat-form-field>
         <mat-label>Rue</mat-label>
         <input matInput formControlName="street" (change)="update()" />
         <mat-error>{{ form().get('street')?.errors | errorMessage }}</mat-error>
     </mat-form-field>
 
-    <div class="nat-vertical nat-horizontal-gap-10" [class.nat-sm-horizontal]="!vertical()">
-        <div class="nat-horizontal nat-gap-10" [class.nat-expand]="!vertical()">
-            <mat-form-field [style.width.px]="120">
-                <mat-label>Code postal</mat-label>
-                <input matInput formControlName="postcode" (change)="update()" />
-                <mat-error>{{ form().get('postcode')?.errors | errorMessage }}</mat-error>
-            </mat-form-field>
+    <mat-form-field>
+        <mat-label>Code postal</mat-label>
+        <input matInput formControlName="postcode" (change)="update()" />
+        <mat-error>{{ form().get('postcode')?.errors | errorMessage }}</mat-error>
+    </mat-form-field>
 
-            <mat-form-field class="nat-expand">
-                <mat-label>Localité</mat-label>
-                <input matInput formControlName="locality" (change)="update()" />
-                <mat-error>{{ form().get('locality')?.errors | errorMessage }}</mat-error>
-            </mat-form-field>
-        </div>
+    <mat-form-field>
+        <mat-label>Localité</mat-label>
+        <input matInput formControlName="locality" (change)="update()" />
+        <mat-error>{{ form().get('locality')?.errors | errorMessage }}</mat-error>
+    </mat-form-field>
 
-        <natural-select
-            formControlName="country"
-            searchField="name"
-            placeholder="Pays"
-            [service]="countryService"
-            [showIcon]="false"
-            (selectionChange)="update()"
-        />
-    </div>
-</div>
+    <natural-select
+        formControlName="country"
+        searchField="name"
+        placeholder="Pays"
+        [service]="countryService"
+        [showIcon]="false"
+        (selectionChange)="update()"
+    />
+</form>

client/app/shared/components/address/address.component.ts

@@ -22,8 +22,6 @@ import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
 })
 export class AddressComponent {
     protected readonly countryService = inject(CountryService);
-
-    public readonly vertical = input(false);
     public readonly form = input.required<FormGroup>();
     protected readonly addressChange = output();
 

client/app/user/components/change-password/change-password.component.html

@@ -1,15 +1,10 @@
-<div class="body nat-padding nat-gap nat-vertical nat-center nat-expand" [formGroup]="form">
-    <div class="nat-vertical nat-gap-15">
-        <h1 class="mat-font-headline-sm">Changement de mot de passe</h1>
+<form class="body nat-vertical nat-margin-standard" [formGroup]="form">
+    <h1 class="mat-font-headline-sm" i18n>Changement de mot de passe</h1>
 
-        <app-password [form]="form" />
-        <!-- Spacer-->
-        <div></div>
-
-        <div class="nat-horizontal nat-center">
-            <button matButton="filled" [disabled]="form.disabled || !form.valid" (click)="maybeConfirm()">
-                Changer le mot de passe
-            </button>
-        </div>
+    <app-password [form]="form" />
+    <div class="nat-horizontal nat-center">
+        <button matButton="filled" [disabled]="form.disabled || !form.valid" (click)="maybeConfirm()">
+            Changer le mot de passe
+        </button>
     </div>
-</div>
+</form>

client/app/user/components/change-password/change-password.component.scss

@@ -1,14 +1,19 @@
-:host {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    min-height: 100%;
-    overflow-x: auto;
-}
+@use '@ecodev/natural-layout' as nat;
+
 .body {
+    box-sizing: border-box;
     margin: auto;
-    max-width: 940px;
+    padding: 10px;
+    width: 100%;
+    max-width: 460px;
+}
+
+@include nat.media(sm) {
+    .body {
+        padding: 20px;
+    }
+}
+
+.mat-button {
+    align-self: center;
 }

client/app/user/components/password/password.component.scss

@@ -1,3 +0,0 @@
-#form {
-    max-width: 304px;
-}