fix header and steps buttons on bottom

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

@@ -73,12 +73,14 @@
 			></button>
 		</ng-template>
 	</p-confirmDialog>
-	<div class="columns">
-		<div class="column"></div>
-		<div class="column">
-			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
-				Suivant
-			</button>
+	<div class="bottom-step-buttons">
+		<div class="columns">
+			<div class="column"></div>
+			<div class="column">
+				<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
+					Suivant
+				</button>
+			</div>
 		</div>
 	</div>
 </div>

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

@@ -41,17 +41,19 @@
 				</div>
 			</div>
 		</div>
-		<div class="columns">
-			<div class="column">
-				<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
-					précédent
-				</button>
-			</div>
-			<div class="column">
-				<!--				[disabled]="form.invalid"-->
-				<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
-					suivant
-				</button>
+		<div class="bottom-step-buttons">
+			<div class="columns">
+				<div class="column">
+					<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
+						précédent
+					</button>
+				</div>
+				<div class="column">
+					<!--				[disabled]="form.invalid"-->
+					<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+						suivant
+					</button>
+				</div>
 			</div>
 		</div>
 	</form>

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

@@ -1,8 +1,18 @@
 @import '../../../../styles/variables';
+@import '../../../../styles/dev-utilities/helpers';
 
 #creation_stepper {
+	@extend .fixed-box;
+	background: $white;
+	height: 6em;
+
+	.columns,
+	.column {
+		padding-bottom: 0;
+	}
+
 	.step-bar-container {
-		margin: 1rem 0 2rem;
+		margin: 1rem 0 0;
 		height: 0.6em;
 		display: inline-block;
 		min-width: 1px;
@@ -41,6 +51,9 @@
 		}
 	}
 
+	.step-info {
+		padding: 0.85rem;
+	}
 	.step-title-poll {
 		font-size: 0.85rem !important;
 		color: $d-neutral !important;

src/styles/dev-utilities/_helpers.scss

@@ -39,3 +39,11 @@
 .marged-auto {
 	margin: 0 auto;
 }
+
+.fixed-box {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+}

src/styles/partials/_forms.scss

@@ -310,6 +310,8 @@ mat-checkbox {
 }
 
 .step {
+	padding-top: 8em;
+
 	.title {
 		color: $primary_color;
 	}

src/styles/partials/_navigation.scss

@@ -106,3 +106,18 @@ a {
 a span.ui-steps-number {
 	padding: 0;
 }
+
+.bottom-step-buttons {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+	height: 6em;
+	background: $white;
+	padding: 0.85rem;
+	.button {
+		width: 100%;
+		display: block;
+	}
+}