fix form-input

1 files changed, 55 insertions, 43 deletions

diff --git a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
index df11e76e..e996b022 100644
--- a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -10,54 +10,66 @@
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
     <b-form>
-      <b-form-group
-        :label="
-          $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)'
-        "
-        label-for="serverUri"
-      >
-        <b-form-input
-          id="serverUri"
-          v-model="form.serverUri"
-          placeholder="https://"
-          type="text"
-          :state="getValidationState($v.form.serverUri)"
-          data-test-id="configureConnection-input-serverUri"
-          @input="$v.form.serverUri.$touch()"
-        />
-        <b-form-invalid-feedback role="alert">
-          <template v-if="!$v.form.serverUri.required">
-            {{ $t('global.form.fieldRequired') }}
-          </template>
-        </b-form-invalid-feedback>
-      </b-form-group>
-      <b-form-group
-        :label="$t('pageVirtualMedia.modal.username')"
-        label-for="username"
-      >
-        <b-form-input
-          id="username"
-          v-model="form.username"
-          type="text"
-          data-test-id="configureConnection-input-username"
-        />
-      </b-form-group>
-      <b-form-group
-        :label="$t('pageVirtualMedia.modal.password')"
-        label-for="password"
-      >
-        <b-form-input
-          id="password"
-          v-model="form.password"
-          type="password"
-          data-test-id="configureConnection-input-password"
-        />
-      </b-form-group>
+      <b-input-group>
+        <b-form-group
+          :label="
+            $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)'
+          "
+          label-for="serverUri"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="serverUri"
+            v-model="form.serverUri"
+            placeholder="https://"
+            type="text"
+            :state="getValidationState($v.form.serverUri)"
+            data-test-id="configureConnection-input-serverUri"
+            @input="$v.form.serverUri.$touch()"
+          />
+          <b-form-invalid-feedback role="alert">
+            <template v-if="!$v.form.serverUri.required">
+              {{ $t('global.form.fieldRequired') }}
+            </template>
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-input-group>
+
+      <b-input-group>
+        <b-form-group
+          :label="$t('pageVirtualMedia.modal.username')"
+          label-for="username"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="username"
+            v-model="form.username"
+            type="text"
+            data-test-id="configureConnection-input-username"
+          />
+        </b-form-group>
+      </b-input-group>
+
+      <b-input-group>
+        <b-form-group
+          :label="$t('pageVirtualMedia.modal.password')"
+          label-for="password"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="password"
+            v-model="form.password"
+            type="password"
+            data-test-id="configureConnection-input-password"
+          />
+        </b-form-group>
+      </b-input-group>
       <b-form-group>
         <b-form-checkbox
           v-model="form.isRW"
           data-test-id="configureConnection-input-isRW"
           name="check-button"
+          class="pl-4"
         >
           RW
         </b-form-checkbox>