SILABMC-240: fix layout modal

1 files changed, 95 insertions, 89 deletions

diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
index bbe3f53c..2bea7177 100644
--- a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -5,97 +5,103 @@
     :title="$t('pageUserManagement.accountPolicySettings')"
     @hidden="resetForm"
   >
-    <b-form id="form-settings" novalidate @submit.prevent="handleSubmit">
-      <b-container>
+    <b-form id="form-settings" novalidate fluid @submit.prevent="handleSubmit">
+      <b-container fluid>
         <b-row>
-          <b-col>
-            <b-form-group
-              :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')"
-              label-for="lockout-threshold"
-            >
-              <b-form-text id="lockout-threshold-help-block">
-                {{
-                  $t('global.form.valueMustBeBetween', {
-                    min: 0,
-                    max: 65535,
-                  })
-                }}
-              </b-form-text>
-              <b-form-input
-                id="lockout-threshold"
-                v-model.number="form.lockoutThreshold"
-                type="number"
-                aria-describedby="lockout-threshold-help-block"
-                data-test-id="userManagement-input-lockoutThreshold"
-                :state="getValidationState($v.form.lockoutThreshold)"
-                @input="$v.form.lockoutThreshold.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.lockoutThreshold.required">
-                  {{ $t('global.form.fieldRequired') }}
-                </template>
-                <template
-                  v-if="
-                    !$v.form.lockoutThreshold.minLength ||
-                    !$v.form.lockoutThreshold.maxLength
-                  "
+          <b-col lg="12">
+            <b-row>
+              <b-col lg="12">
+                <b-form-group
+                  :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')"
+                  label-for="lockout-threshold"
                 >
-                  {{
-                    $t('global.form.valueMustBeBetween', {
-                      min: 0,
-                      max: 65535,
-                    })
-                  }}
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-          <b-col>
-            <b-form-group
-              :label="$t('pageUserManagement.modal.userUnlockMethod')"
-            >
-              <b-form-radio
-                v-model="form.unlockMethod"
-                name="unlock-method"
-                class="mb-2"
-                :value="0"
-                data-test-id="userManagement-radio-manualUnlock"
-                @input="$v.form.unlockMethod.$touch()"
-              >
-                {{ $t('pageUserManagement.modal.manual') }}
-              </b-form-radio>
-              <b-form-radio
-                v-model="form.unlockMethod"
-                name="unlock-method"
-                :value="1"
-                data-test-id="userManagement-radio-automaticUnlock"
-                @input="$v.form.unlockMethod.$touch()"
-              >
-                {{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
-              </b-form-radio>
-              <div class="mt-3 ml-4">
-                <b-form-text id="lockout-duration-help-block">
-                  {{ $t('pageUserManagement.modal.timeoutDurationSeconds') }}
-                </b-form-text>
-                <b-form-input
-                  v-model.number="form.lockoutDuration"
-                  aria-describedby="lockout-duration-help-block"
-                  type="number"
-                  data-test-id="userManagement-input-lockoutDuration"
-                  :state="getValidationState($v.form.lockoutDuration)"
-                  :readonly="$v.form.unlockMethod.$model === 0"
-                  @input="$v.form.lockoutDuration.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  <template v-if="!$v.form.lockoutDuration.required">
-                    {{ $t('global.form.fieldRequired') }}
-                  </template>
-                  <template v-else-if="!$v.form.lockoutDuration.minvalue">
-                    {{ $t('global.form.mustBeAtLeast', { value: 1 }) }}
-                  </template>
-                </b-form-invalid-feedback>
-              </div>
-            </b-form-group>
+                  <b-form-text id="lockout-threshold-help-block">
+                    {{
+                      $t('global.form.valueMustBeBetween', {
+                        min: 0,
+                        max: 65535,
+                      })
+                    }}
+                  </b-form-text>
+                  <b-form-input
+                    id="lockout-threshold"
+                    v-model.number="form.lockoutThreshold"
+                    type="number"
+                    aria-describedby="lockout-threshold-help-block"
+                    data-test-id="userManagement-input-lockoutThreshold"
+                    :state="getValidationState($v.form.lockoutThreshold)"
+                    @input="$v.form.lockoutThreshold.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <template v-if="!$v.form.lockoutThreshold.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </template>
+                    <template
+                      v-if="
+                        !$v.form.lockoutThreshold.minLength ||
+                        !$v.form.lockoutThreshold.maxLength
+                      "
+                    >
+                      {{
+                        $t('global.form.valueMustBeBetween', {
+                          min: 0,
+                          max: 65535,
+                        })
+                      }}
+                    </template>
+                  </b-form-invalid-feedback>
+                </b-form-group>
+              </b-col>
+              <b-col lg="12">
+                <b-form-group
+                  :label="$t('pageUserManagement.modal.userUnlockMethod')"
+                >
+                  <b-form-radio
+                    v-model="form.unlockMethod"
+                    name="unlock-method"
+                    class="mb-2"
+                    :value="0"
+                    data-test-id="userManagement-radio-manualUnlock"
+                    @input="$v.form.unlockMethod.$touch()"
+                  >
+                    {{ $t('pageUserManagement.modal.manual') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.unlockMethod"
+                    name="unlock-method"
+                    :value="1"
+                    data-test-id="userManagement-radio-automaticUnlock"
+                    @input="$v.form.unlockMethod.$touch()"
+                  >
+                    {{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
+                  </b-form-radio>
+                  <div class="mt-3">
+                    <b-form-text id="lockout-duration-help-block">
+                      {{
+                        $t('pageUserManagement.modal.timeoutDurationSeconds')
+                      }}
+                    </b-form-text>
+                    <b-form-input
+                      v-model.number="form.lockoutDuration"
+                      aria-describedby="lockout-duration-help-block"
+                      type="number"
+                      data-test-id="userManagement-input-lockoutDuration"
+                      :state="getValidationState($v.form.lockoutDuration)"
+                      :readonly="$v.form.unlockMethod.$model === 0"
+                      @input="$v.form.lockoutDuration.$touch()"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      <template v-if="!$v.form.lockoutDuration.required">
+                        {{ $t('global.form.fieldRequired') }}
+                      </template>
+                      <template v-else-if="!$v.form.lockoutDuration.minvalue">
+                        {{ $t('global.form.mustBeAtLeast', { value: 1 }) }}
+                      </template>
+                    </b-form-invalid-feedback>
+                  </div>
+                </b-form-group>
+              </b-col>
+            </b-row>
           </b-col>
         </b-row>
       </b-container>