add modal global style, fix some modal

4 files changed, 98 insertions, 105 deletions

diff --git a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
index abe2e4c5..be2927f3 100644
--- a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
+++ b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
@@ -3,7 +3,6 @@
     id="modal-reset"
     ref="modal"
     :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
-    title-tag="h2"
     @hidden="resetConfirm"
   >
     <p class="mb-2">
diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
index aae307f8..8b396f41 100644
--- a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
@@ -78,25 +78,22 @@
                 >
                   {{ $t('pageVirtualMedia.configureConnection') }}
                 </b-button>
-
-                <b-button
-                  v-if="!device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  :disabled="!device.serverUri"
-                  @click="startLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.start') }}
-                </b-button>
-                <b-button
-                  v-if="device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  @click="stopLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.stop') }}
-                </b-button>
               </b-form-group>
+              <b-button
+                v-if="!device.isActive"
+                variant="primary"
+                :disabled="!device.serverUri"
+                @click="startLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="device.isActive"
+                variant="primary"
+                @click="stopLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
             </b-col>
           </b-row>
         </page-section>
diff --git a/src/views/_sila/Overview/Network/ModalDns.vue b/src/views/_sila/Overview/Network/ModalDns.vue
index 342ebe5e..82edb1e8 100644
--- a/src/views/_sila/Overview/Network/ModalDns.vue
+++ b/src/views/_sila/Overview/Network/ModalDns.vue
@@ -7,7 +7,7 @@
   >
     <b-form id="form-dns" @submit.prevent="handleSubmit">
       <b-row>
-        <b-col sm="6">
+        <b-col>
           <b-form-group
             :label="$t('pageNetwork.modal.staticDns')"
             label-for="staticDns"
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 5bfb81b4..63258a40 100644
--- a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -3,7 +3,6 @@
     <b-modal
       id="generate-csr"
       ref="modal"
-      size="lg"
       no-stacking
       :title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
       @ok="onOkGenerateCsrModal"
@@ -13,7 +12,88 @@
       <b-form id="generate-csr-form" novalidate @submit.prevent="handleSubmit">
         <b-container fluid>
           <b-row>
-            <b-col lg="9">
+            <b-col lg="12">
+              <b-row>
+                <b-col lg="12">
+                  <p class="col-form-label">
+                    {{ $t('pageCertificates.modal.privateKey') }}
+                  </p>
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.keyPairAlgorithm')"
+                    label-for="key-pair-algorithm"
+                  >
+                    <b-form-select
+                      id="key-pair-algorithm"
+                      v-model="form.keyPairAlgorithm"
+                      data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
+                      :options="keyPairAlgorithmOptions"
+                      :state="getValidationState($v.form.keyPairAlgorithm)"
+                      @input="$v.form.keyPairAlgorithm.$touch()"
+                    >
+                      <template #first>
+                        <b-form-select-option :value="null" disabled>
+                          {{ $t('global.form.selectAnOption') }}
+                        </b-form-select-option>
+                      </template>
+                    </b-form-select>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="12">
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyCurveId')"
+                      label-for="key-curve-id"
+                    >
+                      <b-form-select
+                        id="key-curve-id"
+                        v-model="form.keyCurveId"
+                        data-test-id="modalGenerateCsr-select-keyCurveId"
+                        :options="keyCurveIdOptions"
+                        :state="getValidationState($v.form.keyCurveId)"
+                        @input="$v.form.keyCurveId.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyBitLength')"
+                      label-for="key-bit-length"
+                    >
+                      <b-form-select
+                        id="key-bit-length"
+                        v-model="form.keyBitLength"
+                        data-test-id="modalGenerateCsr-select-keyBitLength"
+                        :options="keyBitLengthOptions"
+                        :state="getValidationState($v.form.keyBitLength)"
+                        @input="$v.form.keyBitLength.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                </b-col>
+              </b-row>
               <b-row>
                 <b-col lg="6">
                   <b-form-group
@@ -241,89 +321,6 @@
                 </b-col>
               </b-row>
             </b-col>
-            <b-col lg="3">
-              <b-row>
-                <b-col lg="12">
-                  <p class="col-form-label">
-                    {{ $t('pageCertificates.modal.privateKey') }}
-                  </p>
-                  <b-form-group
-                    :label="$t('pageCertificates.modal.keyPairAlgorithm')"
-                    label-for="key-pair-algorithm"
-                  >
-                    <b-form-select
-                      id="key-pair-algorithm"
-                      v-model="form.keyPairAlgorithm"
-                      data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
-                      :options="keyPairAlgorithmOptions"
-                      :state="getValidationState($v.form.keyPairAlgorithm)"
-                      @input="$v.form.keyPairAlgorithm.$touch()"
-                    >
-                      <template #first>
-                        <b-form-select-option :value="null" disabled>
-                          {{ $t('global.form.selectAnOption') }}
-                        </b-form-select-option>
-                      </template>
-                    </b-form-select>
-                    <b-form-invalid-feedback role="alert">
-                      {{ $t('global.form.fieldRequired') }}
-                    </b-form-invalid-feedback>
-                  </b-form-group>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col lg="12">
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
-                    <b-form-group
-                      :label="$t('pageCertificates.modal.keyCurveId')"
-                      label-for="key-curve-id"
-                    >
-                      <b-form-select
-                        id="key-curve-id"
-                        v-model="form.keyCurveId"
-                        data-test-id="modalGenerateCsr-select-keyCurveId"
-                        :options="keyCurveIdOptions"
-                        :state="getValidationState($v.form.keyCurveId)"
-                        @input="$v.form.keyCurveId.$touch()"
-                      >
-                        <template #first>
-                          <b-form-select-option :value="null" disabled>
-                            {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
-                        </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </template>
-                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
-                    <b-form-group
-                      :label="$t('pageCertificates.modal.keyBitLength')"
-                      label-for="key-bit-length"
-                    >
-                      <b-form-select
-                        id="key-bit-length"
-                        v-model="form.keyBitLength"
-                        data-test-id="modalGenerateCsr-select-keyBitLength"
-                        :options="keyBitLengthOptions"
-                        :state="getValidationState($v.form.keyBitLength)"
-                        @input="$v.form.keyBitLength.$touch()"
-                      >
-                        <template #first>
-                          <b-form-select-option :value="null" disabled>
-                            {{ $t('global.form.selectAnOption') }}
-                          </b-form-select-option>
-                        </template>
-                      </b-form-select>
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </template>
-                </b-col>
-              </b-row>
-            </b-col>
           </b-row>
         </b-container>
       </b-form>