style(champs): reduce width of small inputs

Closes #7427
Cf #7387

Quelques considérations :

- l'attribut `size` ne correspond pas exactement au nombre de caractères
  qui peut être saisi (à moins d'utiliser une font monospace). On doit
  donc utiliser une valeur légèrement supérieure pour être sûr que
  les combinaisons navigateurs/police/taille soient suffisantes.

- on essaye d'harmoniser un peu les largeurs possibles, donc on utilise
  un size=20 qui correspond bien à plusieurs champs concernés

- délicat d'harmoniser avec max-width car les champs de type number &
  date ajoutent des outils/icones à droite de l'input

J'en ai profité pour définir de vrais placeholders pour les champs de
type number.

app/assets/stylesheets/forms.scss

@@ -238,14 +238,50 @@
   input[type=number],
   input[type=tel],
   textarea {
-    width: 100%;
+    @media (max-width: $two-columns-breakpoint) {
+      width: 100%;
+    }
+
+    // don't set 100% width when width-* classes or size attribute are applied
+    @media (min-width: $two-columns-breakpoint) {
+      &:not([class^='width-']):not([size]) {
+        width: 100%;
+      }
+    }
   }
 
-  input[type=email],
-  input[type=password],
-  input[type=number],
-  input[type=tel], {
-    max-width: 500px;
+  @media (min-width: $two-columns-breakpoint) {
+    input[type=email],
+    input[type=password],
+    input[type=number],
+    input[type=tel] {
+      max-width: 500px;
+    }
+  }
+
+  input[type=date] {
+    max-width: 180px;
+  }
+
+  // override default site width/max-width for editable-champ form (Usager form)
+  .editable-champ {
+    @media (min-width: $two-columns-breakpoint) {
+      input {
+        max-width: none;
+
+        &:not([size]) {
+          &[type='date'],
+          &[type='tel'],
+          &[type='number'] {
+            width: 33.33%;
+          }
+
+          &[type='email'] {
+            width: 66.67%;
+          }
+        }
+      }
+    }
   }
 
   input[type=checkbox],
@@ -262,10 +298,6 @@
     margin-bottom: $default-fields-spacer;
   }
 
-  input[type=date] {
-    max-width: 180px;
-  }
-
   select {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
     -webkit-appearance: none;

app/assets/stylesheets/utils.scss

@@ -77,6 +77,22 @@
 
 .width-33 {
   width: 33.33%;
+
+  @media (min-width: $two-columns-breakpoint) {
+    &-desktop {
+      width: 33.33%;
+    }
+  }
+}
+
+.width-66 {
+  width: 66.67%;
+
+  @media (min-width: $two-columns-breakpoint) {
+    &-desktop {
+      width: 66.67%;
+    }
+  }
 }
 
 // who known

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

@@ -2,5 +2,5 @@
   id: champ.input_id,
   aria: { describedby: champ.describedby_id },
   step: :any,
-  placeholder: champ.libelle,
+  placeholder: "3.14",
   required: champ.mandatory?

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

@@ -5,7 +5,8 @@
     placeholder: "Numéro de dossier",
     autocomplete: 'off',
     required: champ.mandatory?,
-    data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) }
+    data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) },
+    size: 20
 
   .help-block{ id: dom_id(champ, :help_block) }
     = render partial: 'shared/champs/dossier_link/help_block', locals: { id: champ.value }

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

@@ -3,4 +3,6 @@
   placeholder: t(".placeholder"),
   required: champ.mandatory?,
   aria: { describedby: champ.describedby_id },
-  data: { controller: 'iban-input'}
+  data: { controller: 'iban-input'},
+  class: "width-66-desktop",
+  maxlength: 34 + 9 # count space separator of 4 digits-groups

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

@@ -1,5 +1,5 @@
 = form.number_field :value,
   id: champ.input_id,
   aria: { describedby: champ.describedby_id },
-  placeholder: champ.libelle,
+  placeholder: 5,
   required: champ.mandatory?

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

@@ -5,7 +5,9 @@
   data: { controller: 'turbo-input', turbo_input_url_value: champs_siret_path(champ.id) },
   required: champ.mandatory?,
   pattern: "[0-9]{14}",
-  title: t(".title")
+  title: t(".title"),
+  class: "width-33-desktop",
+  maxlength: 14
 .spinner.right.hidden
 .siret-info{ id: dom_id(champ, :siret_info) }
   - if champ.etablissement.present?