correct size of advanced config content and all step width

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -117,8 +117,11 @@
 		</mat-checkbox>
 		<br />
 		<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
-			Nombre de réponses limitées à ce nombre. Utile pour réserver des places à un évènement.
+			Nombre de réponses limitées à ce nombre.
 		</mat-checkbox>
+		<p>
+			Utile pour réserver des places à un évènement.
+		</p>
 		<input
 			*ngIf="form.value.hasMaxCountOfAnswers"
 			#maxCountOfAnswers
@@ -138,7 +141,7 @@
 		</h2>
 		<div>
 			<mat-checkbox class="is-not-flex" formControlName="useVoterUniqueLink">
-				Spécifier un <strong> lien unique de vote</strong> à des participants définis par leur email
+				Lien unique de vote par email
 			</mat-checkbox>
 			<p>
 				lister les email des participants et leur fournir un lien unique pour voter à chacun, au lieu d'un lien
@@ -155,11 +158,17 @@
 		</div>
 
 		<mat-checkbox class="is-not-flex" formControlName="allowNewDateTime">
+			Proposer un créneau
+		</mat-checkbox>
+		<p>
 			Permettre au public de proposer un créneau de vote supplémentaire
-		</mat-checkbox>
+		</p>
 		<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
-			Les informations du sondage seront chiffrés en base de données
+			Zéro knowledge
 		</mat-checkbox>
+		<p>
+			Les informations du sondage seront chiffrées en base de données
+		</p>
 	</fieldset>
 	<app-errors-list [form]="form"></app-errors-list>
 </form>

src/app/features/administration/form/steps/step-five/step-five.component.html

@@ -1,7 +1,7 @@
+<app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper>
 <div class="step">
 	<div class="min-height">
 		<section class="supplement">
-			<app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper>
 			<app-errors-list [form]="pollService.form"></app-errors-list>
 			<div class="advanced-config">
 				<h2 class="title is-2">

src/app/features/administration/form/steps/step-four/step-four.component.html

@@ -1,6 +1,6 @@
+<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
 <div class="step">
 	<div class="min-height">
-		<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
 		<app-errors-list [form]="pollService.form"></app-errors-list>
 
 		<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
@@ -115,8 +115,9 @@
 			</div>
 		</div>
 	</div>
-	<app-nav-steps
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-	></app-nav-steps>
 </div>
+
+<app-nav-steps
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+></app-nav-steps>

src/app/features/administration/form/steps/step-one/step-one.component.html

@@ -1,6 +1,6 @@
+<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
 <div class="step step-container">
 	<form class="min-height" [formGroup]="pollService.form">
-		<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
 		<section class="poll-title">
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
@@ -73,11 +73,10 @@
 			></button>
 		</ng-template>
 	</p-confirmDialog>
-
-	<app-nav-steps
-		[display_previous_button]="false"
-		[display_next_button]="true"
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-	></app-nav-steps>
 </div>
+<app-nav-steps
+	[display_previous_button]="false"
+	[display_next_button]="true"
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+></app-nav-steps>

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -1,5 +1,5 @@
+<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
 <div class="step min-height step-resume">
-	<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
 	<div class="columns content">
 		<div class="column">
 			<h2 class="title is-2">
@@ -82,9 +82,9 @@
 			</div>
 		</div>
 	</div>
-	<app-nav-steps
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-		[is_finish_step]="true"
-	></app-nav-steps>
 </div>
+<app-nav-steps
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+	[is_finish_step]="true"
+></app-nav-steps>

src/app/features/administration/form/steps/step-six/step-six.component.html

@@ -1,5 +1,5 @@
+<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
 <div class="step min-height">
-	<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
 	<div class="min-height">
 		<form action="#" [formGroup]="pollService.form">
 			<h2>
@@ -18,8 +18,8 @@
 			<input class="input" type="text" id="email" formControlName="creatorEmail" />
 		</form>
 	</div>
-	<app-nav-steps
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-	></app-nav-steps>
 </div>
+<app-nav-steps
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+></app-nav-steps>

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -1,5 +1,5 @@
+<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
 <div class="step min-height">
-	<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--	sélecteur d'interface-->
 	<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
@@ -28,8 +28,8 @@
 		<app-day-list [form]="pollService.form"></app-day-list>
 		<!--			[hasSeveralHours]="pollService.form.value.hasSeveralHours"-->
 	</div>
-	<app-nav-steps
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-	></app-nav-steps>
 </div>
+<app-nav-steps
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+></app-nav-steps>

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -1,7 +1,7 @@
+<app-stepper [step_current]="2" [step_max]="pollService.step_max"></app-stepper>
 <div class="step step-container form-field poll-kind">
 	<form action="#" [formGroup]="pollService.form">
 		<div class="min-height">
-			<app-stepper [step_current]="2" [step_max]="pollService.step_max"></app-stepper>
 			<app-errors-list [form]="pollService.form"></app-errors-list>
 			<h2 class="title is-2">
 				{{ 'creation.want' | translate }}
@@ -42,8 +42,8 @@
 			</div>
 		</div>
 	</form>
-	<app-nav-steps
-		[next_step_number]="pollService.step_current + 1"
-		[previous_step_number]="pollService.step_current - 1"
-	></app-nav-steps>
 </div>
+<app-nav-steps
+	[next_step_number]="pollService.step_current + 1"
+	[previous_step_number]="pollService.step_current - 1"
+></app-nav-steps>

src/app/features/administration/stepper/stepper.component.scss

@@ -66,6 +66,8 @@
 
 	.step-info {
 		padding: 9px 10px;
+		width: 100%;
+		display: block;
 		background: $white;
 		height: $header-nav-inner-height;
 		i {

src/styles/partials/_forms.scss

@@ -191,11 +191,6 @@ mat-checkbox {
 	}
 }
 
-.step {
-	max-width: $main-column-width;
-	margin: 0 auto;
-}
-
 .fa {
 	margin-right: 1ch;
 
@@ -277,9 +272,11 @@ mat-checkbox {
 }
 
 .step {
+	max-width: $main-column-width;
+	margin: 0 auto;
 	padding: 2rem 1rem;
-
 	box-sizing: border-box;
+	overflow: auto;
 	.title {
 		color: $d-primary-intense;
 		margin-bottom: 36px;
@@ -292,6 +289,10 @@ mat-checkbox {
 		font-size: 1rem;
 		line-height: 1.25rem;
 	}
+	p,
+	* {
+		max-width: $main-column-width-inner;
+	}
 }
 
 // resume de la création de sondage

src/styles/variables.scss

@@ -69,6 +69,11 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
 
 // sizes and breakpoints
 $main-column-width: 400px;
+$main-column-width-inner: 380px;
 $mobile-size: 400px;
 $header-nav-height: 68px;
 $header-nav-inner-height: 60px;
+
+:root {
+	--main-col-width: $main-column-width-inner;
+}