add style

Author: xav-car

admin/app/components/quests/form.gjs

@@ -3,14 +3,15 @@ import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
 import PixInput from '@1024pix/pix-ui/components/pix-input';
 import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
-import PageTitle from '../ui/page-title';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
+import PageTitle from '../ui/page-title';
+
 const LOCAL_STORAGE_KEY = 'QUEST_REQUIREMENT_SNIPPETS';
 
 export default class QuestForm extends Component {

admin/app/components/quests/requirements/form.gjs

@@ -1,7 +1,6 @@
 import PixBlock from '@1024pix/pix-ui/components/pix-block';
 import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
 import PixSelect from '@1024pix/pix-ui/components/pix-select';
-import PageTitle from '../../ui/page-title';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
@@ -10,6 +9,8 @@ import { runTask } from 'ember-lifeline';
 import ObjectRequirementForm from 'pix-admin/components/quests/requirements/object/form';
 import { objectConfigurations } from 'pix-admin/components/quests/requirements/object/object-configuration.js';
 
+import PageTitle from '../../ui/page-title';
+
 export default class RequirementForm extends Component {
   @tracked selectedRequirementType = null;
   @service router;
@@ -39,26 +40,31 @@ export default class RequirementForm extends Component {
     <PageTitle>
       <:title>Créer ou Éditer un "requirement" de quête</:title>
     </PageTitle>
-    <PixBlock @variant="admin" class="quest-requirement-form">
-      <PixSelect
-        @onChange={{this.updateRequirementType}}
-        @value={{this.selectedRequirementType}}
-        @options={{this.requirementTypeOptions}}
-        @placeholder="Choisissez votre type de requirement"
-        @hideDefaultOption={{true}}
-      >
-        <:label>Sélectionner un type de requirement</:label>
-      </PixSelect>
+    <section class="quest-object-form">
+      <PixBlock @variant="admin" class="quest-requirement-form">
+        <PixSelect
+          class="quest-requirement-form__item-width-content"
+          @onChange={{this.updateRequirementType}}
+          @value={{this.selectedRequirementType}}
+          @options={{this.requirementTypeOptions}}
+          @placeholder="Choisissez votre type de requirement"
+          @hideDefaultOption={{true}}
+        >
+          <:label>Sélectionner un type de requirement</:label>
+        </PixSelect>
 
-      <div>
-        {{#if this.selectedRequirementType}}
-          <ObjectRequirementForm @configuration={{this.configurationForSelectedRequirement}} />
-        {{/if}}
-      </div>
+        <div>
+          {{#if this.selectedRequirementType}}
+            <ObjectRequirementForm @configuration={{this.configurationForSelectedRequirement}} />
+          {{/if}}
+        </div>
+      </PixBlock>
 
-      <PixButtonLink @route="authenticated.quest-creator" @size="small" @variant="primary">
-        Revenir au formulaire de quête
-      </PixButtonLink>
-    </PixBlock>
+      <div class="quest-button-edition__button">
+        <PixButtonLink @route="authenticated.quest-creator" @size="small" @variant="primary">
+          Revenir au formulaire de quête
+        </PixButtonLink>
+      </div>
+    </section>
   </template>
 }

admin/app/components/quests/requirements/object/form.gjs

@@ -74,7 +74,12 @@ export default class ObjectRequirementCreateOrEditForm extends Component {
 
   <template>
     <form class="quest-object-form" {{on "submit" this.saveSnippet}}>
-      <PixInput onchange={{this.updateLabel}} required={{true}} aria-required={{true}}>
+      <PixInput
+        class="quest-requirement-form__item-width-content"
+        onchange={{this.updateLabel}}
+        required={{true}}
+        aria-required={{true}}
+      >
         <:label>Nom de la condition</:label>
       </PixInput>
 

admin/app/styles/components/quests/form.scss

@@ -18,6 +18,7 @@
 
   &__button {
     display: flex;
+    flex-wrap: wrap;
     gap: 24px;
     justify-content: center;
   }
@@ -27,6 +28,11 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+
+  &__item-width-content {
+    width: 50%;
+    min-width: fit-content;
+  }
 }
 
 .quest-object-form {