diff --git a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
index 961a52f7ffe353defa66c077c72a46994e6aea6d..1a94130e2f5cd9285e97c244ee4a89b4590074e5 100644
--- a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
+++ b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
@@ -4,17 +4,19 @@
<h3>Quelles sont les modalités d'accueil de la structure ?</h3>
<p>Plusieurs choix possibles</p>
</div>
- <p *ngIf="isEditMode && !structureForm.get('categories').get('accessModality').valid" class="missing-information">
- <app-svg-icon class="validationIcon" [iconClass]="'icon-26'" [folder]="'form'" [icon]="'notValidate'" />
- <span>Il faut renseigner au moins un champ</span>
- </p>
- <div *ngIf="accessModality" class="modality">
- <app-checkbox-form
- *ngFor="let module of accessModality.modules"
- [isChecked]="isInArray('accessModality', module.id)"
- [text]="module.name"
- [iconSvg]="module.id"
- (checkEvent)="onCheckChange($event, 'categories.accessModality', module.id)"
- />
+ <div class="formGroup">
+ <p *ngIf="isEditMode && !structureForm.get('categories').get('accessModality').valid" class="missing-information">
+ <app-svg-icon class="validationIcon" [iconClass]="'icon-26'" [folder]="'form'" [icon]="'notValidate'" />
+ <span>Il faut renseigner au moins un champ</span>
+ </p>
+ <div *ngIf="accessModality" class="modality">
+ <app-checkbox-form
+ *ngFor="let module of accessModality.modules"
+ [isChecked]="isInArray('accessModality', module.id)"
+ [text]="module.name"
+ [iconSvg]="module.id"
+ (checkEvent)="onCheckChange($event, 'categories.accessModality', module.id)"
+ />
+ </div>
</div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
index 475295fbee10366829c0ef3355270168da5b5f83..f3689f070f9192f3cef8205464036fbabcbba89d 100644
--- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
+++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
@@ -13,12 +13,6 @@
height: 80px;
box-sizing: border-box;
max-width: 600px;
- @media #{$small-phone} {
- width: 95% !important;
- }
- @media #{$tablet} {
- width: 296px;
- }
padding: 1rem;
display: flex;
diff --git a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
index 1f7906c5dd85c94687e253c77a254d26013e8c79..f735383d7bc2ea832a7636c353d7fdf2620806a6 100644
--- a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
+++ b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html
@@ -10,65 +10,67 @@
</h3>
<p>{{ isMandatoryFields ? '' : 'Facultatif - ' }}Plusieurs choix possibles</p>
</div>
- <p *ngIf="isEditMode && !structureForm.get('categories').get('age').valid" class="missing-information">
- <app-svg-icon class="validationIcon" [iconClass]="'icon-26'" [folder]="'form'" [icon]="'notValidate'" />
- <span>Il faut renseigner au moins un champ</span>
- </p>
- <ng-container *ngIf="!isMandatoryFields">
- <div *ngIf="languageAndIlliteracy" class="title" style="gap: 12px">
- <h4>Langue et illettrisme</h4>
- <div class="tagList">
- <app-tag-item
- *ngFor="let choice of languageAndIlliteracy.modules"
- [iconName]="isInArray(choice.id, 'languageAndIlliteracy') ? 'check' : null"
- [label]="choice.name"
- [color]="isInArray(choice.id, 'languageAndIlliteracy') ? 'black' : 'white'"
- [clickable]="true"
- (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
- />
+ <div class="formGroup">
+ <p *ngIf="isEditMode && !structureForm.get('categories').get('age').valid" class="missing-information">
+ <app-svg-icon class="validationIcon" [iconClass]="'icon-26'" [folder]="'form'" [icon]="'notValidate'" />
+ <span>Il faut renseigner au moins un champ</span>
+ </p>
+ <ng-container *ngIf="!isMandatoryFields">
+ <div *ngIf="languageAndIlliteracy" class="title" style="gap: 12px">
+ <h4>Langue et illettrisme</h4>
+ <div class="tagList">
+ <app-tag-item
+ *ngFor="let choice of languageAndIlliteracy.modules"
+ [iconName]="isInArray(choice.id, 'languageAndIlliteracy') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'languageAndIlliteracy') ? 'black' : 'white'"
+ [clickable]="true"
+ (action)="updateChoicePublic(choice.id, 'languageAndIlliteracy')"
+ />
+ </div>
</div>
- </div>
- <div *ngIf="handicaps" class="title" style="gap: 12px">
- <h4>Handicaps</h4>
- <div class="tagList">
- <app-tag-item
- *ngFor="let choice of handicaps.modules"
- [iconName]="isInArray(choice.id, 'handicaps') ? 'check' : null"
- [label]="choice.name"
- [color]="isInArray(choice.id, 'handicaps') ? 'black' : 'white'"
- [clickable]="true"
- (action)="updateChoicePublic(choice.id, 'handicaps')"
- />
+ <div *ngIf="handicaps" class="title" style="gap: 12px">
+ <h4>Handicaps</h4>
+ <div class="tagList">
+ <app-tag-item
+ *ngFor="let choice of handicaps.modules"
+ [iconName]="isInArray(choice.id, 'handicaps') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'handicaps') ? 'black' : 'white'"
+ [clickable]="true"
+ (action)="updateChoicePublic(choice.id, 'handicaps')"
+ />
+ </div>
</div>
- </div>
- <div *ngIf="genre" class="title" style="gap: 12px">
- <h4>Genre</h4>
- <div class="tagList">
- <app-tag-item
- *ngFor="let choice of genre.modules"
- [iconName]="isInArray(choice.id, 'genre') ? 'check' : null"
- [label]="choice.name"
- [color]="isInArray(choice.id, 'genre') ? 'black' : 'white'"
- [clickable]="true"
- (action)="updateChoicePublic(choice.id, 'genre')"
- />
+ <div *ngIf="genre" class="title" style="gap: 12px">
+ <h4>Genre</h4>
+ <div class="tagList">
+ <app-tag-item
+ *ngFor="let choice of genre.modules"
+ [iconName]="isInArray(choice.id, 'genre') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'genre') ? 'black' : 'white'"
+ [clickable]="true"
+ (action)="updateChoicePublic(choice.id, 'genre')"
+ />
+ </div>
</div>
- </div>
- </ng-container>
+ </ng-container>
- <ng-container *ngIf="isMandatoryFields">
- <div *ngIf="age" class="title" style="gap: 12px">
- <h4>Âge</h4>
- <div class="tagList">
- <app-tag-item
- *ngFor="let choice of age.modules"
- [iconName]="isInArray(choice.id, 'age') ? 'check' : null"
- [label]="choice.name"
- [color]="isInArray(choice.id, 'age') ? 'black' : 'white'"
- [clickable]="true"
- (action)="updateChoicePublic(choice.id, 'age')"
- />
+ <ng-container *ngIf="isMandatoryFields">
+ <div *ngIf="age" class="title" style="gap: 12px">
+ <h4>Âge</h4>
+ <div class="tagList">
+ <app-tag-item
+ *ngFor="let choice of age.modules"
+ [iconName]="isInArray(choice.id, 'age') ? 'check' : null"
+ [label]="choice.name"
+ [color]="isInArray(choice.id, 'age') ? 'black' : 'white'"
+ [clickable]="true"
+ (action)="updateChoicePublic(choice.id, 'age')"
+ />
+ </div>
</div>
- </div>
- </ng-container>
+ </ng-container>
+ </div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
index 245ab00233d2aff54aeea024a44e9cb3ceb1ac74..c935ed82b67e77be672400960ea75270844eb30d 100644
--- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
+++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html
@@ -5,14 +5,16 @@
<p>Facultatif - Plusieurs choix possibles</p>
</div>
- <div class="tagList">
- <app-tag-item
- *ngFor="let material of solidarityMaterial.modules"
- [iconName]="isInArray(material.id) ? 'check' : null"
- [label]="material.name"
- [color]="isInArray(material.id) ? 'black' : 'white'"
- [clickable]="true"
- (action)="updateChoiceSolidarityMaterial(material.id)"
- />
+ <div class="formGroup">
+ <div class="tagList">
+ <app-tag-item
+ *ngFor="let material of solidarityMaterial.modules"
+ [iconName]="isInArray(material.id) ? 'check' : null"
+ [label]="material.name"
+ [color]="isInArray(material.id) ? 'black' : 'white'"
+ [clickable]="true"
+ (action)="updateChoiceSolidarityMaterial(material.id)"
+ />
+ </div>
</div>
</form>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index b275d28bc57fdf24f1c729e3a0c615da2e09ecc1..167a1bc2c0ea5ba14609f0d34a530549376d4ca8 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -25,6 +25,7 @@ button {
p {
@include font-bold-16;
color: $grey-1;
+ text-align: left;
}
&:hover {