From 4c67de3ebd8661e1090decbf1ee5c1fc415f8ef7 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Mon, 27 Jul 2020 11:06:05 +0200
Subject: [PATCH] add scss to deal with form col width

---
 app/src/scss/main.scss            | 27 +++++++++++++++++++++++++--
 app/src/views/user/UserCreate.vue | 30 ++++++------------------------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 84ea866b..56ee7a54 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -30,12 +30,35 @@ body {
   color: #333;
 }
 
-.input-group.is-invalid {
-  ~ .invalid-feedback {
+.input-group {
+  select {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.is-invalid ~ .invalid-feedback {
     display: block;
   }
 }
 
+.col-form-label {
+  @include media-breakpoint-up(xs) {
+    width: 100%;
+  }
+  @include media-breakpoint-up(sm) {
+    flex-basis: 40%;
+  }
+  @include media-breakpoint-up(md) {
+    flex-basis: 30%;
+  }
+  @include media-breakpoint-up(lg) {
+    flex-basis: 25%;
+  }
+  @include media-breakpoint-up(xl) {
+    flex-basis: 20%;
+  }
+}
+
 
 // Fork-awesome overrides
 .fa-fw {
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 78789c04..e46436b2 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -4,10 +4,7 @@
 
     <b-card :header="$t('users_new')" header-tag="h2">
       <b-form id="user-create" @submit.prevent="onSubmit">
-        <b-form-group
-          label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('user_username')" label-for="input-username" label-class="test"
-        >
+        <b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
           <b-input
             id="input-username" :placeholder="$t('placeholder.username')"
             aria-describedby="username-feedback" required
@@ -19,7 +16,7 @@
           </b-form-invalid-feedback>
         </b-form-group>
 
-        <b-form-group label-cols-sm="5" label-cols-lg="4" label-cols-xl="3">
+        <b-form-group label-cols="auto">
           <template v-slot:label aria-hidden="true">
             {{ $t('user_fullname') }}
           </template>
@@ -55,10 +52,7 @@
           </div>
         </b-form-group>
 
-        <b-form-group
-          label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('user_email')" label-for="input-email"
-        >
+        <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
           <b-input-group>
             <b-input
               id="input-email" :placeholder="$t('placeholder.username')"
@@ -82,8 +76,7 @@
         </b-form-group>
 
         <b-form-group
-          label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
+          label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
           :description="$t('mailbox_quota_description')"
         >
           <b-input-group append="M">
@@ -94,10 +87,7 @@
           </b-input-group>
         </b-form-group>
 
-        <b-form-group
-          label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('password')" label-for="input-password"
-        >
+        <b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
           <b-input
             id="input-password" placeholder="••••••••"
             aria-describedby="password-feedback" required
@@ -110,8 +100,7 @@
         </b-form-group>
 
         <b-form-group
-          label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('password_confirmation')" label-for="input-confirmation"
+          label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
           :description="$t('good_practices_about_user_password')"
         >
           <b-input
@@ -259,11 +248,4 @@ export default {
     }
   }
 }
-
-.input-group {
-  select {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
 </style>