style(combo): better inputs sizes for pays/regions/departement/communes champs

app/assets/stylesheets/forms.scss

@@ -328,19 +328,21 @@
     }
   }
 
-
   [data-reach-combobox-input] {
-    width: 100%;
-    min-width: 50%;
-    max-width: 100%;
     min-height: 62px;
     border-radius: 4px;
     border: solid 1px $border-grey;
     padding: $default-padding;
-  }
 
-  [data-reach-combobox-input]:focus {
-    border-color: $blue-france-500;
+    &:not([class^='width-']) {
+      width: 100%;
+      min-width: 50%;
+      max-width: 100%;
+    }
+
+    &:focus {
+      border-color: $blue-france-500;
+    }
   }
 
   [data-reach-combobox-token-list] {

app/assets/stylesheets/utils.scss

@@ -73,6 +73,12 @@
 // sizing
 .width-100 {
   width: 100%;
+
+  @media (max-width: $two-columns-breakpoint) {
+    &-mobile {
+      width: 100%;
+    }
+  }
 }
 
 .width-33 {

app/javascript/components/ComboCommunesSearch.tsx

@@ -54,8 +54,12 @@ const [placeholderDepartement, placeholderCommune] =
 
 export default function ComboCommunesSearch({
   id,
+  classNameDepartement,
   ...props
-}: ComboSearchProps<CommuneResult> & { id: string }) {
+}: ComboSearchProps<CommuneResult> & {
+  id: string;
+  classNameDepartement?: string;
+}) {
   const group = groupId(id);
   const [departementValue, setDepartementValue] = useHiddenField(
     group,
@@ -84,6 +88,7 @@ export default function ComboCommunesSearch({
           placeholder={placeholderDepartement}
           addForeignDepartement={false}
           value={departementValue}
+          className={classNameDepartement}
           onChange={(_, result) => {
             setDepartementValue(result?.nom ?? '');
             setCodeDepartement(result?.code ?? '');

app/views/shared/dossiers/editable_champs/_communes.html.haml

@@ -5,4 +5,6 @@
 = react_component("ComboCommunesSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  classNameDepartement: "width-33-desktop width-100-mobile",
+  className: "width-66-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_departements.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboDepartementsSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_pays.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboPaysSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_regions.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboRegionsSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)