From 31e6f4273d9856ae9268747c79a81887f962416e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 21 Mar 2024 13:35:15 +0100
Subject: [PATCH] Adjust columns from md to lg breakpoint

---
 .../src/components/Apigw/CSettingsEditor.vue  |   7 +-
 .../Application/CApplicationEditorUnify.vue   |  63 ++--
 .../Authclient/CAuthclientEditorInfo.vue      |   6 +-
 .../Connection/CConnectionEditorDAL.vue       |  19 +-
 .../Settings/System/Auth/ExternalOIDC.vue     |   9 +-
 .../Settings/System/Auth/ExternalSAML.vue     | 275 +++++++++---------
 .../Settings/System/Auth/ExternalSecurity.vue |   8 +-
 .../Settings/System/Auth/ExternalStd.vue      |   7 +-
 .../System/CSystemEditorAuthBgScreen.vue      |   2 +-
 .../Settings/System/CSystemEditorExternal.vue |   1 +
 .../Settings/UI/CUIBrandingEditor.vue         |   2 +-
 .../src/components/User/CUserEditorAvatar.vue |   4 +-
 .../components/User/CUserEditorPassword.vue   |   8 +-
 client/web/admin/src/views/Dashboard.vue      |   1 +
 .../src/views/System/Actionlog/Index.vue      |  45 ++-
 .../compose/src/components/Admin/Import.vue   |   2 +-
 .../components/Chart/Report/FunnelChart.vue   |   4 +-
 .../components/Chart/Report/GaugeChart.vue    |   8 +-
 .../components/Chart/Report/GenericChart.vue  |  42 +--
 .../components/Chart/Report/RadarChart.vue    |   4 +-
 .../components/Chart/Report/ReportEdit.vue    |  34 +--
 .../ModuleFields/Configurator/File.vue        |  28 +-
 .../ModuleFields/Configurator/Number.vue      |  20 +-
 .../ModuleFields/Configurator/validation.vue  |   4 +-
 .../CalendarConfigurator/CalendarDisplay.vue  |   2 +-
 .../PageBlocks/CommentConfigurator.vue        |  51 ++--
 .../components/PageBlocks/Configurator.vue    |  69 +++--
 .../PageBlocks/FileConfigurator.vue           |  28 +-
 .../GeometryConfigurator/Configurator.vue     |  27 +-
 .../PageBlocks/Navigation/Configurator.vue    |  21 +-
 .../Navigation/NavTypes/ComposePage.vue       |   2 -
 .../PageBlocks/Nylas/NylasConfigurator.vue    |   8 +-
 .../PageBlocks/ProgressConfigurator.vue       |  30 +-
 .../PageBlocks/RecordConfigurator.vue         |  16 +-
 .../PageBlocks/RecordListConfigurator.vue     |  46 +--
 .../RecordOrganizerConfigurator.vue           |  21 --
 .../PageBlocks/Shared/AutomationTab.vue       |   6 +-
 .../PageBlocks/TabsConfigurator.vue           |  20 +-
 .../Public/Record/Exporter/index.vue          |  17 +-
 .../compose/src/views/Admin/Charts/Edit.vue   |  20 +-
 .../compose/src/views/Admin/Modules/Edit.vue  |   4 +-
 .../src/views/Admin/Modules/Records/View.vue  |   2 +-
 .../compose/src/views/Admin/Pages/Edit.vue    |   8 +-
 .../web/discovery/src/components/Search.vue   |   4 +-
 .../web/one/src/components/CAppSelector.vue   |   5 +-
 .../src/components/Common/ModuleRecords.vue   |   1 -
 .../src/views/Privacy/DataOverview/index.vue  |   1 -
 .../DisplayElements/Configurators/Chart.vue   |  32 +-
 .../components/Report/Datasources/Join.vue    |  20 +-
 .../components/Report/Datasources/Link.vue    |  20 +-
 client/web/reporter/src/views/Report/Edit.vue |   4 +-
 .../system.actionlog.yaml                     |  45 +--
 .../corteza-webapp-admin/system.settings.yaml |   1 +
 53 files changed, 524 insertions(+), 610 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/CSettingsEditor.vue b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
index 38a7f403d..597680a2c 100644
--- a/client/web/admin/src/components/Apigw/CSettingsEditor.vue
+++ b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
@@ -15,13 +15,11 @@
     >
       <b-col
         cols="12"
-        md="6"
-        class="mb-3 mb-md-0"
+        lg="6"
       >
         <b-form-group
           :label="$t('profiler.label')"
           label-class="text-primary"
-          class="mb-0"
         >
           <b-form-radio-group
             v-model="profilerSetting"
@@ -35,12 +33,11 @@
 
       <b-col
         cols="12"
-        md="6"
+        lg="6"
       >
         <b-form-group
           :label="$t('proxy.label')"
           label-class="text-primary"
-          class="mb-0"
         >
           <b-form-checkbox
             v-model="settings['apigw.proxy.follow-redirects']"
diff --git a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
index 8edd34365..79e6c3f3e 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
@@ -94,42 +94,35 @@
           cols="12"
           lg="6"
         >
-          <b-row>
-            <b-col
-              cols="12"
-              sm="6"
-            >
-              <b-form-group
-                :label="$t('listed')"
-                label-class="text-primary"
-              >
-                <c-input-checkbox
-                  v-model="unify.listed"
-                  data-test-id="checkbox-listed"
-                  switch
-                  :labels="checkboxLabel"
-                />
-              </b-form-group>
-            </b-col>
+          <b-form-group
+            :label="$t('listed')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="unify.listed"
+              data-test-id="checkbox-listed"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
 
-            <b-col
-              v-if="canPin"
-              cols="12"
-              sm="6"
-            >
-              <b-form-group
-                :label="$t('pinned')"
-                label-class="text-primary"
-              >
-                <c-input-checkbox
-                  v-model="unify.pinned"
-                  data-test-id="checkbox-pinned"
-                  switch
-                  :labels="checkboxLabel"
-                />
-              </b-form-group>
-            </b-col>
-          </b-row>
+        <b-col
+          v-if="canPin"
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('pinned')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="unify.pinned"
+              data-test-id="checkbox-pinned"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
         </b-col>
 
         <b-col
diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
index 0a6fe6b69..407056e90 100644
--- a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
+++ b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -147,9 +147,7 @@
           cols="12"
           lg="6"
         >
-          <b-form-group
-            label-class="text-primary"
-          >
+          <b-form-group>
             <b-form-radio-group
               v-model="resource.validGrant"
               value="authorization_code"
@@ -209,6 +207,7 @@
             data-test-id="valid-from"
             :label="$t('validFrom.label')"
             :description="$t('validFrom.description')"
+            label-class="text-primary"
           >
             <c-input-date-time
               v-model="resource.validFrom"
@@ -231,6 +230,7 @@
             data-test-id="expires-at"
             :label="$t('expiresAt.label')"
             :description="$t('expiresAt.description')"
+            label-class="text-primary"
           >
             <c-input-date-time
               v-model="resource.expiresAt"
diff --git a/client/web/admin/src/components/Connection/CConnectionEditorDAL.vue b/client/web/admin/src/components/Connection/CConnectionEditorDAL.vue
index 119b94072..71eef8eba 100644
--- a/client/web/admin/src/components/Connection/CConnectionEditorDAL.vue
+++ b/client/web/admin/src/components/Connection/CConnectionEditorDAL.vue
@@ -13,9 +13,7 @@
     <b-row
       v-if="issues.length"
     >
-      <b-col
-        cols="12"
-      >
+      <b-col cols="12">
         <b-form-group
           :label="$t('connectivity-issues')"
           label-class="text-primary"
@@ -32,10 +30,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col
-        cols="12"
-        lg="12"
-      >
+      <b-col cols="12">
         <b-form-group
           :label="$t('form.model-ident.label')"
           :description="$t('form.model-ident.description', { interpolation: { prefix: '{{{', suffix: '}}}' } })"
@@ -50,10 +45,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col
-        cols="12"
-        lg="12"
-      >
+      <b-col cols="12">
         <b-form-group
           :label="$t('form.type.label')"
           :description="$t('form.type.description')"
@@ -68,10 +60,7 @@
       </b-col>
     </b-row>
     <b-row>
-      <b-col
-        cols="12"
-        lg="12"
-      >
+      <b-col cols="12">
         <b-form-group
           :label="$t('form.params.label')"
           :description="$t('form.params.description')"
diff --git a/client/web/admin/src/components/Settings/System/Auth/ExternalOIDC.vue b/client/web/admin/src/components/Settings/System/Auth/ExternalOIDC.vue
index afe5e7396..1f42ec2a5 100644
--- a/client/web/admin/src/components/Settings/System/Auth/ExternalOIDC.vue
+++ b/client/web/admin/src/components/Settings/System/Auth/ExternalOIDC.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <b-form-group
-      label-cols="2"
-    >
+    <b-form-group>
       <b-form-checkbox
         v-model="value.enabled"
         :value="true"
@@ -14,7 +12,6 @@
 
     <b-form-group
       :label="$t('handle')"
-      label-cols="2"
       label-class="text-primary"
     >
       <b-input-group>
@@ -28,7 +25,6 @@
 
     <b-form-group
       :label="$t('issuer')"
-      label-cols="2"
       label-class="text-primary"
     >
       <b-input-group>
@@ -44,7 +40,6 @@
 
     <b-form-group
       :label="$t('clientKey')"
-      label-cols="2"
       label-class="text-primary"
     >
       <b-input-group>
@@ -54,7 +49,6 @@
 
     <b-form-group
       :label="$t('clientSecret')"
-      label-cols="2"
       label-class="text-primary"
     >
       <b-input-group>
@@ -64,7 +58,6 @@
 
     <b-form-group
       :label="$t('scope')"
-      label-cols="2"
       label-class="text-primary"
     >
       <b-input-group>
diff --git a/client/web/admin/src/components/Settings/System/Auth/ExternalSAML.vue b/client/web/admin/src/components/Settings/System/Auth/ExternalSAML.vue
index 4caf4a2f4..57e693592 100644
--- a/client/web/admin/src/components/Settings/System/Auth/ExternalSAML.vue
+++ b/client/web/admin/src/components/Settings/System/Auth/ExternalSAML.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <b-form-group
-      label-cols="3"
-    >
+    <b-form-group>
       <b-form-checkbox
         v-model="value.enabled"
         :value="true"
@@ -12,157 +10,148 @@
       </b-form-checkbox>
     </b-form-group>
 
-    <div>
-      <b-form-group
-        :label="$t('name')"
-        :description="$t('desc.name')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-input v-model.trim="value.name" />
-        </b-input-group>
-      </b-form-group>
+    <b-form-group
+      :label="$t('name')"
+      :description="$t('desc.name')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-input v-model.trim="value.name" />
+      </b-input-group>
+    </b-form-group>
 
-      <h5>
-        {{ $t('certificate') }}
-      </h5>
+    <hr>
 
-      <b-form-group
-        :label="$t('cert.public')"
-        :description="$t('desc.cert.public')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-textarea
-            v-model.trim="value.cert"
-          />
-        </b-input-group>
-      </b-form-group>
-      <b-form-group
-        :label="$t('cert.private')"
-        :description="$t('desc.cert.private')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-textarea v-model.trim="value.key" />
-        </b-input-group>
-      </b-form-group>
+    <h5>
+      {{ $t('certificate') }}
+    </h5>
 
-      <h5>
-        {{ $t('requests.title') }}
-      </h5>
+    <b-form-group
+      :label="$t('cert.public')"
+      :description="$t('desc.cert.public')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-textarea
+          v-model.trim="value.cert"
+        />
+      </b-input-group>
+    </b-form-group>
+    <b-form-group
+      :label="$t('cert.private')"
+      :description="$t('desc.cert.private')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-textarea v-model.trim="value.key" />
+      </b-input-group>
+    </b-form-group>
 
-      <b-form-group
-        :label="$t('requests.sign-requests')"
-        :description="$t('desc.requests.sign-requests')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-checkbox
-            v-model="value['sign-requests']"
-          />
-        </b-input-group>
-      </b-form-group>
-      <b-form-group
-        :label="$t('requests.sign-method')"
-        :description="$t('desc.requests.sign-method')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-select
-            v-model.trim="value['sign-method']"
-            :options="signMethods"
-          >
-            <template #first>
-              <b-form-select-option
-                value=""
-                disabled
-              >
-                {{ $t('admin:general.label.selectOption') }}
-              </b-form-select-option>
-            </template>
-          </b-form-select>
-        </b-input-group>
-      </b-form-group>
+    <hr>
 
-      <b-form-group
-        :label="$t('requests.binding')"
-        :description="$t('desc.requests.binding')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-select
-            v-model.trim="value['binding']"
-            :options="httpBindings"
-          >
-            <template #first>
-              <b-form-select-option
-                value=""
-                disabled
-              >
-                {{ $t('admin:general.label.selectOption') }}
-              </b-form-select-option>
-            </template>
-          </b-form-select>
-        </b-input-group>
-      </b-form-group>
+    <h5>
+      {{ $t('requests.title') }}
+    </h5>
 
-      <h5
-        class="mt-2"
+    <b-form-group
+      :description="$t('desc.requests.sign-requests')"
+    >
+      <b-form-checkbox
+        v-model="value['sign-requests']"
       >
-        {{ $t('idp.title') }}
-      </h5>
+        {{ $t('requests.sign-requests') }}
+      </b-form-checkbox>
+    </b-form-group>
 
-      <b-form-group
-        :label="$t('idp.url')"
-        :description="$t('desc.idp.url')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-input v-model.trim="value.idp.url" />
-        </b-input-group>
-      </b-form-group>
+    <b-form-group
+      :label="$t('requests.sign-method')"
+      :description="$t('desc.requests.sign-method')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-select
+          v-model.trim="value['sign-method']"
+          :options="signMethods"
+        >
+          <template #first>
+            <b-form-select-option
+              value=""
+              disabled
+            >
+              {{ $t('admin:general.label.selectOption') }}
+            </b-form-select-option>
+          </template>
+        </b-form-select>
+      </b-input-group>
+    </b-form-group>
 
-      <b-form-group
-        :label="$t('idp.ident-name')"
-        :description="$t('desc.idp.ident-name')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-input v-model.trim="value.idp['ident-name']" />
-        </b-input-group>
-      </b-form-group>
+    <b-form-group
+      :label="$t('requests.binding')"
+      :description="$t('desc.requests.binding')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-select
+          v-model.trim="value['binding']"
+          :options="httpBindings"
+        >
+          <template #first>
+            <b-form-select-option
+              value=""
+              disabled
+            >
+              {{ $t('admin:general.label.selectOption') }}
+            </b-form-select-option>
+          </template>
+        </b-form-select>
+      </b-input-group>
+    </b-form-group>
 
-      <b-form-group
-        :label="$t('idp.ident-handle')"
-        :description="$t('desc.idp.ident-handle')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-input v-model.trim="value.idp['ident-handle']" />
-        </b-input-group>
-      </b-form-group>
+    <hr>
 
-      <b-form-group
-        :label="$t('idp.ident-identifier')"
-        :description="$t('desc.idp.ident-identifier')"
-        label-cols="3"
-        label-class="text-primary"
-      >
-        <b-input-group>
-          <b-form-input v-model.trim="value.idp['ident-identifier']" />
-        </b-input-group>
-      </b-form-group>
-    </div>
+    <h5>
+      {{ $t('idp.title') }}
+    </h5>
+
+    <b-form-group
+      :label="$t('idp.url')"
+      :description="$t('desc.idp.url')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-input v-model.trim="value.idp.url" />
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group
+      :label="$t('idp.ident-name')"
+      :description="$t('desc.idp.ident-name')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-input v-model.trim="value.idp['ident-name']" />
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group
+      :label="$t('idp.ident-handle')"
+      :description="$t('desc.idp.ident-handle')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-input v-model.trim="value.idp['ident-handle']" />
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group
+      :label="$t('idp.ident-identifier')"
+      :description="$t('desc.idp.ident-identifier')"
+      label-class="text-primary"
+    >
+      <b-input-group>
+        <b-form-input v-model.trim="value.idp['ident-identifier']" />
+      </b-input-group>
+    </b-form-group>
 
     <security
       v-model="value.security"
diff --git a/client/web/admin/src/components/Settings/System/Auth/ExternalSecurity.vue b/client/web/admin/src/components/Settings/System/Auth/ExternalSecurity.vue
index 14b0181f5..d6b3dd565 100644
--- a/client/web/admin/src/components/Settings/System/Auth/ExternalSecurity.vue
+++ b/client/web/admin/src/components/Settings/System/Auth/ExternalSecurity.vue
@@ -1,9 +1,13 @@
 <template>
   <div>
     <hr>
+
+    <h5>
+      {{ $t('title') }}
+    </h5>
+
     <b-form-group
       :label="$t('permitted-roles.label')"
-      label-cols="3"
       label-class="text-primary"
       class="mb-0"
     >
@@ -19,7 +23,6 @@
 
     <b-form-group
       :label="$t('prohibited-roles.label')"
-      label-cols="3"
       label-class="text-primary"
       class="mb-0"
     >
@@ -35,7 +38,6 @@
 
     <b-form-group
       :label="$t('forced-roles.label')"
-      label-cols="3"
       label-class="text-primary"
       class="mb-0"
     >
diff --git a/client/web/admin/src/components/Settings/System/Auth/ExternalStd.vue b/client/web/admin/src/components/Settings/System/Auth/ExternalStd.vue
index 6c5a82392..e43dd8146 100644
--- a/client/web/admin/src/components/Settings/System/Auth/ExternalStd.vue
+++ b/client/web/admin/src/components/Settings/System/Auth/ExternalStd.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <b-form-group
-      label-cols="3"
-    >
+    <b-form-group>
       <b-form-checkbox
         v-model="value.enabled"
       >
@@ -12,7 +10,6 @@
 
     <b-form-group
       v-if="value.handle === 'nylas'"
-      label-cols="3"
     >
       <b-form-checkbox
         v-model="providerUsage"
@@ -23,7 +20,6 @@
 
     <b-form-group
       :label="$t('clientKey')"
-      label-cols="3"
       label-class="text-primary"
     >
       <b-input-group>
@@ -36,7 +32,6 @@
 
     <b-form-group
       :label="$t('clientSecret')"
-      label-cols="3"
       label-class="text-primary"
     >
       <b-input-group>
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
index 8a52fd63c..13a62d9ba 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
@@ -10,7 +10,7 @@
       </h4>
     </template>
 
-    <b-row cols="12">
+    <b-row>
       <b-col
         cols="12"
         lg="6"
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
index f2c278b3b..244eed0c8 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
@@ -75,6 +75,7 @@
     <b-modal
       v-model="modal.open"
       :title="modal.title"
+      scrollable
       size="lg"
       title-class="text-capitalize"
       @ok="modal.updater(modal.data)"
diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
index 301ee8d8a..d022471d4 100644
--- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
@@ -37,8 +37,8 @@
           <b-col
             v-for="key in themeVariables"
             :key="key"
-            md="6"
             cols="12"
+            lg="6"
           >
             <b-form-group
               :label="$t(`theme.variables.${key}.label`)"
diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index 45f8acad7..932067c4f 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -46,7 +46,7 @@
       <b-row class="mt-3">
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('initial.color')"
@@ -69,7 +69,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('initial.backgroundColor')"
diff --git a/client/web/admin/src/components/User/CUserEditorPassword.vue b/client/web/admin/src/components/User/CUserEditorPassword.vue
index b5520a0c1..b88c0dd8f 100644
--- a/client/web/admin/src/components/User/CUserEditorPassword.vue
+++ b/client/web/admin/src/components/User/CUserEditorPassword.vue
@@ -18,9 +18,7 @@
       @submit.prevent="onPasswordSubmit"
     >
       <b-row>
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('new')"
             :description="getPasswordWarning"
@@ -37,9 +35,7 @@
           </b-form-group>
         </b-col>
 
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('confirm')"
             :description="getConfirmPasswordWarning"
diff --git a/client/web/admin/src/views/Dashboard.vue b/client/web/admin/src/views/Dashboard.vue
index a60c3578b..c4d7f5c15 100644
--- a/client/web/admin/src/views/Dashboard.vue
+++ b/client/web/admin/src/views/Dashboard.vue
@@ -24,6 +24,7 @@
           header-class="border-bottom"
           footer-class="border-top"
           class="shadow-sm h-100"
+          style="min-height: 500px;"
         >
           <template #header>
             <b-card-title title-tag="h4">
diff --git a/client/web/admin/src/views/System/Actionlog/Index.vue b/client/web/admin/src/views/System/Actionlog/Index.vue
index 90be06484..01fc3f848 100644
--- a/client/web/admin/src/views/System/Actionlog/Index.vue
+++ b/client/web/admin/src/views/System/Actionlog/Index.vue
@@ -183,7 +183,7 @@
                 <b-col cols="4">
                   {{ $t('details.id') }}
                 </b-col>
-                <b-col cols="8">
+                <b-col>
                   {{ a.actionID }}
                 </b-col>
               </b-row>
@@ -193,7 +193,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-timestamp"
-                  cols="8"
                 >
                   {{ a.timestamp | locFullDateTime }}
                 </b-col>
@@ -204,7 +203,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-request-origin"
-                  cols="8"
                 >
                   {{ a.requestOrigin }}
                 </b-col>
@@ -213,7 +211,7 @@
                 <b-col cols="4">
                   {{ $t('details.requestID') }}
                 </b-col>
-                <b-col cols="8">
+                <b-col>
                   {{ a.requestID }}
                 </b-col>
               </b-row>
@@ -221,7 +219,7 @@
                 <b-col cols="4">
                   {{ $t('details.actorIPAddr') }}
                 </b-col>
-                <b-col cols="8">
+                <b-col>
                   {{ a.actorIPAddr }}
                 </b-col>
               </b-row>
@@ -231,7 +229,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-user"
-                  cols="8"
                 >
                   {{ a.actor }}
                 </b-col>
@@ -242,7 +239,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-user-id"
-                  cols="8"
                 >
                   {{ a.actorID }}
                 </b-col>
@@ -253,7 +249,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-severity"
-                  cols="8"
                 >
                   {{ getSeverityLabel(a.severity) }}
                 </b-col>
@@ -264,7 +259,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-resource"
-                  cols="8"
                 >
                   {{ a.resource }}
                 </b-col>
@@ -275,7 +269,6 @@
                 </b-col>
                 <b-col
                   data-test-id="details-action"
-                  cols="8"
                 >
                   {{ a.action }}
                 </b-col>
@@ -288,7 +281,7 @@
                 <b-col cols="4">
                   {{ $t('details.description') }}
                 </b-col>
-                <b-col cols="8">
+                <b-col>
                   {{ a.description }}
                 </b-col>
               </b-row>
@@ -296,22 +289,26 @@
                 <b-col cols="4">
                   {{ $t('details.error') }}
                 </b-col>
-                <b-col cols="8">
+                <b-col>
                   {{ a.error }}
                 </b-col>
               </b-row>
-              <hr>
-              <b-row
-                v-for="(val, key) in a.meta"
-                :key="key"
-              >
-                <b-col cols="4">
-                  <code>{{ key }}</code>
-                </b-col>
-                <b-col cols="8">
-                  <code>{{ val }}</code>
-                </b-col>
-              </b-row>
+
+              <template v-if="a.meta">
+                <hr>
+                <h6>{{ $t('details.meta') }}</h6>
+                <b-row
+                  v-for="(val, key) in a.meta"
+                  :key="key"
+                >
+                  <b-col>
+                    <code>{{ key }}</code>
+                  </b-col>
+                  <b-col>
+                    <code>{{ val }}</code>
+                  </b-col>
+                </b-row>
+              </template>
             </b-card>
           </b-card-group>
         </template>
diff --git a/client/web/compose/src/components/Admin/Import.vue b/client/web/compose/src/components/Admin/Import.vue
index 88fe1c221..7a027d966 100644
--- a/client/web/compose/src/components/Admin/Import.vue
+++ b/client/web/compose/src/components/Admin/Import.vue
@@ -57,7 +57,7 @@
                 v-for="(o, index) in importObj.list"
                 :key="index"
                 cols="12"
-                sm="6"
+                md="6"
                 lg="4"
               >
                 <b-form-checkbox v-model="o.import">
diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
index b26fe4679..b12a1f05a 100644
--- a/client/web/compose/src/components/Chart/Report/FunnelChart.vue
+++ b/client/web/compose/src/components/Chart/Report/FunnelChart.vue
@@ -32,8 +32,8 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
-          offset-md="6"
+          lg="6"
+          offset-lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.options.label')"
diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
index 42b79f29b..cf7a1b8aa 100644
--- a/client/web/compose/src/components/Chart/Report/GaugeChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
@@ -60,7 +60,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.fx.label')"
@@ -76,7 +76,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.options.label')"
@@ -92,7 +92,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.angle.start')"
@@ -108,7 +108,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.angle.end')"
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 590e65101..ea7759d5c 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -16,7 +16,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.dimension.rotate.label')"
@@ -44,7 +44,7 @@
         <b-row>
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.labelLabel')"
@@ -68,7 +68,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.labelPosition.label')"
@@ -83,7 +83,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.minLabel')"
@@ -99,7 +99,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.maxLabel')"
@@ -115,7 +115,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.rotate.label')"
@@ -131,7 +131,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.yAxis.options.label')"
@@ -173,7 +173,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.labelLabel')"
@@ -197,7 +197,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.output.label')"
@@ -217,7 +217,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.fx.label')"
@@ -233,7 +233,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.options.label')"
@@ -283,7 +283,7 @@
         <b-col
           v-if="!hasRelativeDisplay(metric)"
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.stack.label')"
@@ -299,7 +299,7 @@
         <b-col
           v-if="metric.type === 'scatter'"
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.symbol.label')"
@@ -324,7 +324,7 @@
         <b-row>
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.tooltip.formatting.label')"
@@ -340,7 +340,7 @@
           <b-col
             v-if="!hasAxis"
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.tooltip.labelNextToChart')"
@@ -366,7 +366,7 @@
         <b-row>
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.default')"
@@ -387,7 +387,7 @@
         >
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.top')"
@@ -401,7 +401,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.right')"
@@ -415,7 +415,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.bottom')"
@@ -429,7 +429,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.additionalConfig.offset.position.left')"
@@ -441,7 +441,7 @@
             </b-form-group>
           </b-col>
 
-          <b-col cols="12">
+          <b-col>
             <small class="text-muted">
               {{ $t('edit.additionalConfig.offset.valueRange') }}
             </small>
diff --git a/client/web/compose/src/components/Chart/Report/RadarChart.vue b/client/web/compose/src/components/Chart/Report/RadarChart.vue
index f3b5ff097..c7f0148aa 100644
--- a/client/web/compose/src/components/Chart/Report/RadarChart.vue
+++ b/client/web/compose/src/components/Chart/Report/RadarChart.vue
@@ -7,7 +7,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.labelLabel')"
@@ -43,7 +43,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.metric.radar.shape.label')"
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
index 3b9c68165..f30f7111a 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue
@@ -11,7 +11,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.module.label')"
@@ -31,7 +31,7 @@
         <b-col
           v-if="!!module"
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.filter.preset')"
@@ -95,7 +95,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('edit.dimension.fieldLabel')"
@@ -114,7 +114,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('edit.dimension.function.label')"
@@ -137,7 +137,7 @@
             <b-row>
               <b-col
                 cols="12"
-                md="6"
+                lg="6"
               >
                 <b-form-group
                   :label="$t('edit.dimension.defaultValueLabel')"
@@ -153,7 +153,7 @@
 
               <b-col
                 cols="12"
-                md="6"
+                lg="6"
               >
                 <b-form-group
                   :label="$t('edit.dimension.options.label')"
@@ -243,7 +243,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('edit.metric.fieldLabel')"
@@ -262,7 +262,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('edit.metric.function.label')"
@@ -312,7 +312,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.orientation.label')"
@@ -327,7 +327,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.show')"
@@ -347,7 +347,7 @@
       <b-row>
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.align.label')"
@@ -363,7 +363,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.options.label')"
@@ -390,7 +390,7 @@
       >
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.position.top')"
@@ -404,7 +404,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.position.right')"
@@ -418,7 +418,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.position.bottom')"
@@ -432,7 +432,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('edit.additionalConfig.legend.position.left')"
@@ -444,7 +444,7 @@
           </b-form-group>
         </b-col>
 
-        <b-col cols="12">
+        <b-col>
           <small class="text-muted">
             {{ $t('edit.additionalConfig.legend.valueRange') }}
           </small>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
index 69c5fab90..6faca6dfe 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
@@ -74,8 +74,8 @@
         class="mb-2 mt-2"
       >
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.height')"
@@ -88,8 +88,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.width')"
@@ -102,8 +102,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.maxHeight')"
@@ -116,8 +116,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.maxWidth')"
@@ -130,8 +130,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.borderRadius')"
@@ -144,8 +144,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.margin')"
@@ -158,8 +158,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.background')"
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
index 29283d8ee..a79a54551 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue
@@ -3,7 +3,7 @@
     <b-row>
       <b-col
         cols="12"
-        sm="6"
+        lg="6"
       >
         <b-form-group
           :label="$t('kind.number.displayType.label')"
@@ -20,7 +20,7 @@
 
       <b-col
         cols="12"
-        sm="6"
+        lg="6"
       >
         <b-form-group
           label-class="mb-2 text-primary"
@@ -45,7 +45,7 @@
       <template v-if="f.options.display === 'number'">
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.prefixLabel')"
@@ -60,7 +60,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.suffixLabel')"
@@ -77,7 +77,7 @@
       <template v-if="f.options.display === 'number'">
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.formatLabel')"
@@ -138,7 +138,7 @@
       <template v-if="f.options.display === 'progress'">
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.progress.minimumValue')"
@@ -154,7 +154,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.progress.maximumValue')"
@@ -170,7 +170,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.number.progress.variants.default')"
@@ -304,7 +304,7 @@
       >
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-input
             v-model="liveExample"
@@ -315,7 +315,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <field-viewer
             value-only
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
index 068abc8e1..fcf5083bd 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
@@ -142,7 +142,7 @@
       >
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('constraints.valueModifiers')"
@@ -157,7 +157,7 @@
         <b-col
           v-if="field.isMulti"
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('constraints.multiValues')"
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.vue
index 8f4ecd490..021df1463 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.vue
@@ -64,7 +64,7 @@
     <b-row>
       <b-col
         cols="12"
-        md="6"
+        lg="6"
       >
         <b-form-group
           :label="$t('calendar.view.onEventClick')"
diff --git a/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue b/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
index d2bfe0530..21609f72a 100644
--- a/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/CommentConfigurator.vue
@@ -39,10 +39,7 @@
       </b-form-group>
 
       <b-form-group
-        horizontal
-        :label-cols="3"
         :label="$t('recordList.record.prefilterLabel')"
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-textarea
@@ -64,10 +61,7 @@
       </b-form-group>
 
       <b-form-group
-        horizontal
-        :label-cols="3"
         :label="$t('comment.titleField.label')"
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-select v-model="options.titleField">
@@ -87,10 +81,7 @@
       </b-form-group>
 
       <b-form-group
-        horizontal
-        :label-cols="3"
         :label="$t('comment.contentField.label')"
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-select v-model="options.contentField">
@@ -109,11 +100,9 @@
           {{ $t('comment.contentField.footnote') }}
         </b-form-text>
       </b-form-group>
+
       <b-form-group
-        horizontal
-        :label-cols="3"
         :label="$t('comment.referenceField.label')"
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-select v-model="options.referenceField">
@@ -132,27 +121,25 @@
           {{ $t('comment.referenceField.footnote') }}
         </b-form-text>
       </b-form-group>
+
+      <b-form-group
+        :label="$t('comment.sortDirection.label')"
+        label-class="text-primary"
+      >
+        <b-form-select v-model="options.sortDirection">
+          <option
+            v-for="(item, index) in sortDirections"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </option>
+        </b-form-select>
+        <b-form-text class="text-secondary small">
+          {{ $t('comment.sortDirection.footnote') }}
+        </b-form-text>
+      </b-form-group>
     </div>
-    <b-form-group
-      horizontal
-      :label-cols="3"
-      :label="$t('comment.sortDirection.label')"
-      breakpoint="md"
-      label-class="text-primary"
-    >
-      <b-form-select v-model="options.sortDirection">
-        <option
-          v-for="(item, index) in sortDirections"
-          :key="index"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </option>
-      </b-form-select>
-      <b-form-text class="text-secondary small">
-        {{ $t('comment.sortDirection.footnote') }}
-      </b-form-text>
-    </b-form-group>
   </b-tab>
 </template>
 <script>
diff --git a/client/web/compose/src/components/PageBlocks/Configurator.vue b/client/web/compose/src/components/PageBlocks/Configurator.vue
index 006677dc4..f4e17f44b 100644
--- a/client/web/compose/src/components/PageBlocks/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Configurator.vue
@@ -11,9 +11,7 @@
       title-item-class="order-first"
     >
       <b-row>
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('general.titleLabel')"
             label-class="text-primary"
@@ -49,9 +47,7 @@
           </b-form-group>
         </b-col>
 
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('general.descriptionLabel')"
             label-class="text-primary"
@@ -88,8 +84,7 @@
 
         <b-col
           cols="12"
-          sm="6"
-          class="mb-2"
+          lg="6"
         >
           <b-form-group
             :label="$t('general.headerStyle')"
@@ -102,38 +97,41 @@
               :reduce="o => o.value"
               :placeholder="$t('general.label.none')"
               label="text"
+              class="mb-1"
             />
+
+            <b-form-checkbox
+              v-model="block.style.wrap.kind"
+              value="card"
+              unchecked-value="plain"
+              switch
+            >
+              {{ $t('general.wrap') }}
+            </b-form-checkbox>
+
+            <b-form-checkbox
+              v-model="block.style.border.enabled"
+              switch
+            >
+              {{ $t('general.border.show') }}
+            </b-form-checkbox>
           </b-form-group>
-
-          <b-form-checkbox
-            v-model="block.style.wrap.kind"
-            value="card"
-            unchecked-value="plain"
-            switch
-          >
-            {{ $t('general.wrap') }}
-          </b-form-checkbox>
-
-          <b-form-checkbox
-            v-model="block.style.border.enabled"
-            switch
-          >
-            {{ $t('general.border.show') }}
-          </b-form-checkbox>
         </b-col>
 
         <b-col
           v-if="block.options.showRefresh !== undefined"
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('general.refresh.auto')"
             :description="$t('general.refresh.description')"
             label-class="text-primary"
-            class="mb-1"
           >
-            <b-input-group append="s">
+            <b-input-group
+              append="s"
+              class="mb-1"
+            >
               <b-form-input
                 v-model="block.options.refreshRate"
                 type="number"
@@ -142,20 +140,21 @@
                 @blur="updateRefresh"
               />
             </b-input-group>
+
+            <b-form-checkbox
+              v-model="block.options.showRefresh"
+              switch
+            >
+              {{ $t('general.refresh.show') }}
+            </b-form-checkbox>
           </b-form-group>
-          <b-form-checkbox
-            v-model="block.options.showRefresh"
-            switch
-            class="mb-2"
-          >
-            {{ $t('general.refresh.show') }}
-          </b-form-checkbox>
         </b-col>
 
         <b-col
           v-if="block.options.magnifyOption !== undefined"
           cols="12"
-          sm="6"
+          lg="6"
+          :offset-lg="block.options.showRefresh !== undefined ? 6 : 0"
         >
           <b-form-group
             :label="$t('general.magnifyLabel')"
diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
index 9e7051a20..d5a567d2d 100644
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -66,8 +66,8 @@
         class="mb-2 mt-2"
       >
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.height')"
@@ -82,8 +82,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.width')"
@@ -98,8 +98,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.maxHeight')"
@@ -114,8 +114,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.maxWidth')"
@@ -130,8 +130,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.borderRadius')"
@@ -146,8 +146,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.margin')"
@@ -162,8 +162,8 @@
         </b-col>
 
         <b-col
-          sm="12"
-          md="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('kind.file.view.background')"
diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue
index 4f7151c86..3ec47bfae 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="my-2">
+    <div>
       <c-map
         :map="mapOptions"
         :labels="{
@@ -18,14 +18,13 @@
         {{ $t('geometry.mapHelpText') }}
       </b-form-text>
     </div>
+
     <hr>
 
-    <b-row
-      class="mb-2 mt-4"
-    >
+    <b-row>
       <b-col
-        sm="12"
-        md="4"
+        cols="12"
+        lg="4"
       >
         <b-form-group
           :label="$t('geometry.zoom.zoomStartingLabel')"
@@ -42,8 +41,8 @@
       </b-col>
 
       <b-col
-        sm="12"
-        md="4"
+        cols="12"
+        lg="4"
       >
         <b-form-group
           :label="$t('geometry.zoom.zoomMinLabel')"
@@ -62,8 +61,8 @@
       </b-col>
 
       <b-col
-        sm="12"
-        md="4"
+        cols="12"
+        lg="4"
       >
         <b-form-group
           :label="$t('geometry.zoom.zoomMaxLabel')"
@@ -81,8 +80,8 @@
       </b-col>
 
       <b-col
-        sm="12"
-        md="4"
+        cols="12"
+        lg="4"
       >
         <b-form-group
           :label="$t('geometry.bounds.lockBounds')"
@@ -100,8 +99,8 @@
       </b-col>
 
       <b-col
-        sm="12"
-        md="4"
+        cols="12"
+        lg="4"
       >
         <b-form-group
           :label="$t('geometry.onMarkerClick')"
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index 43add775d..745af9a9b 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -11,8 +11,7 @@
         >
           <b-col
             cols="12"
-            sm="4"
-            class="mb-2 mb-sm-0"
+            lg="4"
           >
             <b-form-group
               :label="$t('navigation.appearance')"
@@ -22,9 +21,9 @@
             >
               <b-form-radio-group
                 v-model="options.display.appearance"
-                buttons
-                button-variant="outline-primary"
                 :options="appearanceOptions"
+                buttons
+                button-variant="outline-secondary"
                 size="sm"
               />
             </b-form-group>
@@ -32,8 +31,7 @@
 
           <b-col
             cols="12"
-            md="4"
-            class="mb-2 mb-sm-0"
+            lg="4"
           >
             <b-form-group
               :label="$t('navigation.justify')"
@@ -42,9 +40,9 @@
             >
               <b-form-radio-group
                 v-model="options.display.justify"
-                buttons
-                button-variant="outline-primary"
                 :options="justifyOptions"
+                buttons
+                button-variant="outline-secondary"
                 size="sm"
               />
             </b-form-group>
@@ -52,8 +50,7 @@
 
           <b-col
             cols="12"
-            md="4"
-            class="mb-2 mb-sm-0"
+            lg="4"
           >
             <b-form-group
               :label="$t('navigation.alignment')"
@@ -62,9 +59,9 @@
             >
               <b-form-radio-group
                 v-model="options.display.alignment"
-                buttons
-                button-variant="outline-primary"
                 :options="alignmentOptions"
+                buttons
+                button-variant="outline-secondary"
                 size="sm"
               />
             </b-form-group>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index eb86c327b..84e59a00c 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -48,8 +48,6 @@
 
     <td
       v-if="selectedPageChildren(options.item.pageID).length > 0"
-      cols="12"
-      sm="6"
       class="align-middle text-center"
     >
       <b-form-group
diff --git a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
index 225eac050..0251f14a5 100644
--- a/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Nylas/NylasConfigurator.vue
@@ -59,7 +59,7 @@
           <template v-if="options.kind === 'Composer'">
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('prefill.to')"
@@ -77,7 +77,7 @@
             </b-col>
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('prefill.subject')"
@@ -96,7 +96,7 @@
             </b-col>
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('prefill.body')"
@@ -118,7 +118,7 @@
           <template v-if="options.kind === 'Mailbox'">
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('prefill.queryString')"
diff --git a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
index b4c17023a..4fb9d1100 100644
--- a/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ProgressConfigurator.vue
@@ -45,9 +45,7 @@
         </b-col>
 
         <template v-if="options.value.moduleID">
-          <b-col
-            cols="12"
-          >
+          <b-col cols="12">
             <b-form-group
               :label="$t('metric.edit.filterLabel')"
               label-class="text-primary"
@@ -72,7 +70,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.field.label')"
@@ -91,7 +89,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.aggregate.label')"
@@ -156,9 +154,7 @@
         </b-col>
 
         <template v-if="options.minValue.moduleID">
-          <b-col
-            cols="12"
-          >
+          <b-col cols="12">
             <b-form-group
               :label="$t('metric.edit.filterLabel')"
               label-class="text-primary"
@@ -183,7 +179,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.field.label')"
@@ -202,7 +198,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.aggregate.label')"
@@ -267,9 +263,7 @@
         </b-col>
 
         <template v-if="options.maxValue.moduleID">
-          <b-col
-            cols="12"
-          >
+          <b-col cols="12">
             <b-form-group
               :label="$t('metric.edit.filterLabel')"
               label-class="text-primary"
@@ -294,7 +288,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.field.label')"
@@ -313,7 +307,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('progress.aggregate.label')"
@@ -346,7 +340,7 @@
       >
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('progress.default-variant')"
@@ -477,9 +471,7 @@
         </h6>
 
         <b-row>
-          <b-col
-            cols="12"
-          >
+          <b-col cols="12">
             <field-viewer
               value-only
               v-bind="mock"
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index 47d29e9b7..b9bad0f1a 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -9,9 +9,7 @@
       </h5>
 
       <b-row>
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('general.module')"
             label-class="text-primary"
@@ -27,7 +25,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('record.recordSelectorDisplayOptions')"
@@ -42,7 +40,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('record.referenceRecordField')"
@@ -63,7 +61,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('record.inlineEdit.enabled')"
@@ -79,7 +77,7 @@
 
         <b-col
           cols="12"
-          md="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('record.horizontalFormLayout')"
@@ -106,9 +104,7 @@
       </h5>
 
       <b-row>
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <field-picker
             :module="fieldModule"
             :fields.sync="options.fields"
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index f88e06436..71e5a285f 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -15,7 +15,7 @@
         <b-row>
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('general.module')"
@@ -35,7 +35,7 @@
           <b-col
             v-if="recordListModule && (onRecordPage || options.editable)"
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               label-class="d-flex align-items-center text-primary"
@@ -132,7 +132,7 @@
           >
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.refField.label')"
@@ -163,7 +163,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.positionField.label')"
@@ -219,7 +219,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.filterHide')"
@@ -236,7 +236,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.prefilterHideSearch')"
@@ -465,7 +465,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.hidePaging')"
@@ -482,7 +482,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 horizontal
@@ -510,7 +510,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.showTotalCount')"
@@ -527,7 +527,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.showRecordPerPageOption')"
@@ -545,7 +545,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 label-class="d-flex align-items-center text-primary p-0"
@@ -581,7 +581,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.recordDisplayOptions')"
@@ -595,7 +595,7 @@
             </b-col>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.recordSelectorDisplayOptions')"
@@ -612,7 +612,7 @@
           <b-row>
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.hideAddButton')"
@@ -629,7 +629,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.selectable')"
@@ -646,7 +646,7 @@
             <b-col
               v-if="onRecordPage"
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.linkToParent')"
@@ -663,7 +663,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.hideImportButton')"
@@ -680,7 +680,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.export.allow')"
@@ -696,7 +696,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.inlineEdit.enabled')"
@@ -712,7 +712,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.enableBulkRecordEdit')"
@@ -728,7 +728,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 label-class="d-flex align-items-center text-primary mb-0"
@@ -750,7 +750,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.showDeletedRecordsOption')"
@@ -766,7 +766,7 @@
 
             <b-col
               cols="12"
-              md="6"
+              lg="6"
             >
               <b-form-group
                 :label="$t('recordList.record.buttons')"
diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
index 46cb38e3d..2c0bed14d 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordOrganizerConfigurator.vue
@@ -39,10 +39,7 @@
       </b-form-group>
 
       <b-form-group
-        :label-cols="3"
         :label="$t('recordList.record.prefilterLabel')"
-        horizontal
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-textarea
@@ -63,10 +60,7 @@
       </b-form-group>
 
       <b-form-group
-        :label-cols="3"
         :label="$t('recordOrganizer.labelField.label')"
-        horizontal
-        breakpoint="md"
         label-class="text-primary"
       >
         <c-input-select
@@ -80,10 +74,7 @@
       </b-form-group>
 
       <b-form-group
-        :label-cols="3"
         :label="$t('recordOrganizer.descriptionField.label')"
-        horizontal
-        breakpoint="md"
         label-class="text-primary"
       >
         <c-input-select
@@ -100,10 +91,7 @@
       </b-form-group>
 
       <b-form-group
-        :label-cols="3"
         :label="$t('recordOrganizer.positionField.label')"
-        horizontal
-        breakpoint="md"
         label-class="text-primary"
       >
         <b-form-select v-model="options.positionField">
@@ -124,10 +112,7 @@
       </b-form-group>
 
       <b-form-group
-        :label-cols="3"
         :label="$t('recordOrganizer.groupField.label')"
-        horizontal
-        breakpoint="md"
         label-class="text-primary"
       >
         <c-input-select
@@ -146,9 +131,6 @@
       <b-form-group
         v-if="options.groupField"
         :label="$t('recordOrganizer.group.label')"
-        :label-cols="3"
-        breakpoint="md"
-        horizontal
         label-class="text-primary"
       >
         <field-editor
@@ -164,9 +146,6 @@
       <b-form-group
         v-if="options.groupField"
         :label="$t('recordOrganizer.onRecordClick')"
-        :label-cols="3"
-        breakpoint="md"
-        horizontal
         label-class="text-primary"
         class="mb-0"
       >
diff --git a/client/web/compose/src/components/PageBlocks/Shared/AutomationTab.vue b/client/web/compose/src/components/PageBlocks/Shared/AutomationTab.vue
index ff1e21fc4..ad6b0dcb7 100644
--- a/client/web/compose/src/components/PageBlocks/Shared/AutomationTab.vue
+++ b/client/web/compose/src/components/PageBlocks/Shared/AutomationTab.vue
@@ -13,7 +13,7 @@
 
     <b-container class="pt-3">
       <b-row>
-        <b-col cols="6">
+        <b-col lg="6">
           <b-card
             :header="$t('automation.configuredButtons')"
             footer-class="text-right"
@@ -51,7 +51,7 @@
             </template>
           </b-card>
         </b-col>
-        <b-col cols="6">
+        <b-col lg="6">
           <button-editor
             v-if="currentButton"
             :page="page"
@@ -65,7 +65,7 @@
       </b-row>
 
       <b-row class="mt-4">
-        <b-col cols="12">
+        <b-col>
           <b-card
             v-if="available.length > 0"
             :header="$t('automation.availableScriptsAndWorkflow', { count: available.length })"
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index 7e64dc008..73d46a4a6 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -10,7 +10,7 @@
     >
       <b-col
         cols="12"
-        md="4"
+        lg="4"
       >
         <b-form-group
           :label="$t('tabs.style.appearance.label')"
@@ -20,7 +20,7 @@
             v-model="block.options.style.appearance"
             :options="style.appearance"
             buttons
-            button-variant="outline-primary"
+            button-variant="outline-secondary"
             size="sm"
           />
         </b-form-group>
@@ -28,7 +28,7 @@
 
       <b-col
         cols="12"
-        md="4"
+        lg="4"
       >
         <b-form-group
           :label="$t('tabs.style.orientation.label')"
@@ -38,7 +38,7 @@
             v-model="block.options.style.orientation"
             :options="style.orientation"
             buttons
-            button-variant="outline-primary"
+            button-variant="outline-secondary"
             size="sm"
           />
         </b-form-group>
@@ -46,7 +46,7 @@
 
       <b-col
         cols="12"
-        md="4"
+        lg="4"
       >
         <b-form-group
           :label="$t('tabs.style.position.label')"
@@ -56,7 +56,7 @@
             v-model="block.options.style.position"
             :options="style.position"
             buttons
-            button-variant="outline-primary"
+            button-variant="outline-secondary"
             size="sm"
           />
         </b-form-group>
@@ -64,7 +64,7 @@
 
       <b-col
         cols="12"
-        md="4"
+        lg="4"
       >
         <b-form-group
           :label="$t('tabs.style.alignment.label')"
@@ -74,7 +74,7 @@
             v-model="block.options.style.alignment"
             :options="style.alignment"
             buttons
-            button-variant="outline-primary"
+            button-variant="outline-secondary"
             size="sm"
           />
         </b-form-group>
@@ -82,7 +82,7 @@
 
       <b-col
         cols="12"
-        md="4"
+        lg="4"
       >
         <b-form-group
           :label="$t('tabs.style.justify.label')"
@@ -92,7 +92,7 @@
             v-model="block.options.style.justify"
             :options="style.justifyOptions"
             buttons
-            button-variant="outline-primary"
+            button-variant="outline-secondary"
             size="sm"
           />
         </b-form-group>
diff --git a/client/web/compose/src/components/Public/Record/Exporter/index.vue b/client/web/compose/src/components/Public/Record/Exporter/index.vue
index 81e1cd83e..11f2a2d53 100644
--- a/client/web/compose/src/components/Public/Record/Exporter/index.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/index.vue
@@ -47,9 +47,7 @@
           <b-row
             v-if="rangeType === 'range'"
           >
-            <b-col
-              md="6"
-            >
+            <b-col lg="6">
               <b-form-group
                 :label="$t('recordList.export.rangeBy')"
                 label-class="text-primary"
@@ -61,9 +59,8 @@
                 />
               </b-form-group>
             </b-col>
-            <b-col
-              md="6"
-            >
+
+            <b-col lg="6">
               <b-form-group
                 :label="$t('recordList.export.dateRange')"
                 label-class="text-primary"
@@ -81,9 +78,7 @@
         <b-row
           v-if="rangeType === 'range'"
         >
-          <b-col
-            md="6"
-          >
+          <b-col lg="6">
             <b-form-group
               :label="$t('recordList.export.filter.from')"
               label-class="text-primary"
@@ -102,9 +97,7 @@
             </b-form-group>
           </b-col>
 
-          <b-col
-            md="6"
-          >
+          <b-col lg="6">
             <b-form-group
               :label="$t('recordList.export.filter.to')"
               label-class="text-primary"
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 02b39ecf2..4f3a3fa24 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -34,8 +34,8 @@
 
             <b-row no-gutters>
               <b-col
-                md="7"
-                sm="12"
+                cols="12"
+                lg="7"
                 class="border-right"
               >
                 <div
@@ -49,7 +49,7 @@
                   >
                     <b-col
                       cols="12"
-                      md="6"
+                      lg="6"
                     >
                       <b-form-group
                         :label="$t('name')"
@@ -65,7 +65,7 @@
 
                     <b-col
                       cols="12"
-                      md="6"
+                      lg="6"
                     >
                       <b-form-group
                         :label="$t('handle')"
@@ -86,7 +86,7 @@
 
                     <b-col
                       cols="12"
-                      md="6"
+                      lg="6"
                     >
                       <b-form-group
                         :label="$t('colorScheme.label')"
@@ -159,7 +159,7 @@
 
                     <b-col
                       cols="12"
-                      md="6"
+                      lg="6"
                       class="mt-2 mt-md-0"
                     >
                       <b-form-group
@@ -250,7 +250,7 @@
                   <b-row>
                     <b-col
                       cols="12"
-                      md="6"
+                      lg="6"
                     >
                       <b-form-group
                         :label="$t('edit.toolbox.saveAsImage.label')"
@@ -268,7 +268,7 @@
                     <b-col
                       v-if="hasAxis"
                       cols="12"
-                      md="6"
+                      lg="6"
                     >
                       <b-form-group
                         :label="$t('edit.toolbox.timeline.label')"
@@ -288,8 +288,8 @@
               </b-col>
 
               <b-col
-                md="5"
-                sm="12"
+                cols="12"
+                lg="5"
               >
                 <div
                   class="d-flex flex-column position-sticky"
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index ac5d7e8e5..76d23cbd6 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -170,7 +170,7 @@
                 <b-row>
                   <b-col
                     cols="12"
-                    md="6"
+                    lg="6"
                   >
                     <b-form-group
                       :label="$t('newLabel')"
@@ -188,7 +188,7 @@
 
                   <b-col
                     cols="12"
-                    md="6"
+                    lg="6"
                   >
                     <b-form-group
                       :label="$t('general.label.handle')"
diff --git a/client/web/compose/src/views/Admin/Modules/Records/View.vue b/client/web/compose/src/views/Admin/Modules/Records/View.vue
index 6dd3c5ec0..9d3fe4bba 100644
--- a/client/web/compose/src/views/Admin/Modules/Records/View.vue
+++ b/client/web/compose/src/views/Admin/Modules/Records/View.vue
@@ -56,8 +56,8 @@
       <b-col
         v-for="(block, index) in blocks"
         :key="index"
-        md="3"
         cols="12"
+        lg="3"
         style="max-height: 650px; height: 650px;"
       >
         <component
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 249484c9a..7cba8e661 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -111,7 +111,7 @@
         >
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="`${$t('newPlaceholder')} *`"
@@ -134,7 +134,7 @@
           </b-col>
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('label.handle')"
@@ -171,7 +171,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               label-class="d-flex align-items-center text-primary"
@@ -205,7 +205,7 @@
 
           <b-col
             cols="12"
-            md="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('edit.otherOptions')"
diff --git a/client/web/discovery/src/components/Search.vue b/client/web/discovery/src/components/Search.vue
index 3a61768b2..57edffdd2 100644
--- a/client/web/discovery/src/components/Search.vue
+++ b/client/web/discovery/src/components/Search.vue
@@ -7,7 +7,7 @@
       no-gutters
     >
       <b-col
-        md="12"
+        cols="12"
         :lg="map.show ? '7' : '12'"
         :xl="map.show ? '8' : '12'"
         class="results-container pt-3"
@@ -64,7 +64,6 @@
           <b-col
             v-for="(hit, i) in filteredHits"
             :key="i"
-            sm="12"
             md="6"
             :lg="map.show ? '6': '4'"
             class="py-3"
@@ -99,7 +98,6 @@
 
       <b-col
         v-if="map.show"
-        md="12"
         lg="5"
         xl="4"
       >
diff --git a/client/web/one/src/components/CAppSelector.vue b/client/web/one/src/components/CAppSelector.vue
index 3e3cd53a5..df8f1b61a 100644
--- a/client/web/one/src/components/CAppSelector.vue
+++ b/client/web/one/src/components/CAppSelector.vue
@@ -45,9 +45,8 @@
               :key="app.applicationID"
               cols="12"
               sm="6"
-              md="6"
-              lg="4"
-              xl="3"
+              md="4"
+              lg="3"
               class="p-0 mb-3 mt-1"
               :data-v-onboarding="getStepName(app.unify.url)"
             >
diff --git a/client/web/privacy/src/components/Common/ModuleRecords.vue b/client/web/privacy/src/components/Common/ModuleRecords.vue
index 74e4aceb7..cb6950c7f 100644
--- a/client/web/privacy/src/components/Common/ModuleRecords.vue
+++ b/client/web/privacy/src/components/Common/ModuleRecords.vue
@@ -49,7 +49,6 @@
             v-for="value in r.values"
             :key="value.name"
             cols="12"
-            md="6"
             lg="6"
           >
             <b-form-group
diff --git a/client/web/privacy/src/views/Privacy/DataOverview/index.vue b/client/web/privacy/src/views/Privacy/DataOverview/index.vue
index d3f96de19..f4093bba3 100644
--- a/client/web/privacy/src/views/Privacy/DataOverview/index.vue
+++ b/client/web/privacy/src/views/Privacy/DataOverview/index.vue
@@ -14,7 +14,6 @@
       <b-col
         cols="12"
         lg="6"
-        xl="5"
       >
         <b-row>
           <b-col
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
index c56d37f24..682716fad 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
@@ -12,7 +12,7 @@
       >
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('display-element:chart.configurator.type')"
@@ -28,7 +28,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('display-element:chart.configurator.chart-title')"
@@ -42,7 +42,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
         >
           <b-form-group
             :label="$t('display-element:chart.configurator.color-scheme')"
@@ -87,7 +87,7 @@
 
         <b-col
           cols="12"
-          sm="6"
+          lg="6"
           class="d-flex flex-column justify-content-center"
         >
           <b-form-checkbox
@@ -342,7 +342,7 @@
         <b-row v-if="!options.legend.hide">
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('display-element:chart.configurator.legend.align.label')"
@@ -359,7 +359,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-group
               :label="$t('display-element:chart.configurator.legend.orientation.label')"
@@ -375,7 +375,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-checkbox
               v-model="options.legend.position.default"
@@ -387,7 +387,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
           >
             <b-form-checkbox
               v-model="options.legend.scrollable"
@@ -402,7 +402,7 @@
           >
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
               xl="3"
             >
               <b-form-group
@@ -417,7 +417,7 @@
 
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
               xl="3"
             >
               <b-form-group
@@ -432,7 +432,7 @@
 
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
               xl="3"
             >
               <b-form-group
@@ -447,7 +447,7 @@
 
             <b-col
               cols="12"
-              sm="6"
+              lg="6"
               xl="3"
             >
               <b-form-group
@@ -502,7 +502,7 @@
         <b-row v-if="!options.offset.default">
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
             xl="3"
           >
             <b-form-group
@@ -517,7 +517,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
             xl="3"
           >
             <b-form-group
@@ -532,7 +532,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
             xl="3"
           >
             <b-form-group
@@ -547,7 +547,7 @@
 
           <b-col
             cols="12"
-            sm="6"
+            lg="6"
             xl="3"
           >
             <b-form-group
diff --git a/client/web/reporter/src/components/Report/Datasources/Join.vue b/client/web/reporter/src/components/Report/Datasources/Join.vue
index 201994b1a..c7f19d173 100644
--- a/client/web/reporter/src/components/Report/Datasources/Join.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Join.vue
@@ -21,7 +21,10 @@
     <hr>
 
     <b-row>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           :label="$t('datasources:primary.source')"
           label-class="text-primary"
@@ -42,7 +45,10 @@
         </b-form-group>
       </b-col>
 
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           :label="$t('datasources:secondary.source')"
           label-class="text-primary"
@@ -65,7 +71,10 @@
     </b-row>
 
     <b-row>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           v-if="step.join.localSource"
           :label="$t('datasources:primary.column')"
@@ -79,7 +88,10 @@
         </b-form-group>
       </b-col>
 
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           v-if="step.join.foreignSource"
           :label="$t('datasources:secondary.column')"
diff --git a/client/web/reporter/src/components/Report/Datasources/Link.vue b/client/web/reporter/src/components/Report/Datasources/Link.vue
index 85cbcfbd5..fa94974f8 100644
--- a/client/web/reporter/src/components/Report/Datasources/Link.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Link.vue
@@ -21,7 +21,10 @@
     <hr>
 
     <b-row>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           :label="$t('datasources:primary.source')"
           label-class="text-primary"
@@ -41,7 +44,10 @@
           </b-form-select>
         </b-form-group>
       </b-col>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           :label="$t('datasources:secondary.source')"
           label-class="text-primary"
@@ -64,7 +70,10 @@
     </b-row>
 
     <b-row>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           v-if="step.link.localSource"
           :label="$t('datasources:primary.column')"
@@ -77,7 +86,10 @@
           />
         </b-form-group>
       </b-col>
-      <b-col cols="6">
+      <b-col
+        cols="12"
+        lg="6"
+      >
         <b-form-group
           v-if="step.link.foreignSource"
           :label="$t('datasources:secondary.column')"
diff --git a/client/web/reporter/src/views/Report/Edit.vue b/client/web/reporter/src/views/Report/Edit.vue
index 2b3c17493..35016da98 100644
--- a/client/web/reporter/src/views/Report/Edit.vue
+++ b/client/web/reporter/src/views/Report/Edit.vue
@@ -87,7 +87,7 @@
               <b-row>
                 <b-col
                   cols="12"
-                  md="6"
+                  lg="6"
                   xl="4"
                 >
                   <b-form-group
@@ -106,7 +106,7 @@
                 </b-col>
                 <b-col
                   cols="12"
-                  md="6"
+                  lg="6"
                   xl="4"
                 >
                   <b-form-group
diff --git a/locale/en/corteza-webapp-admin/system.actionlog.yaml b/locale/en/corteza-webapp-admin/system.actionlog.yaml
index 0626e0b09..98df74397 100644
--- a/locale/en/corteza-webapp-admin/system.actionlog.yaml
+++ b/locale/en/corteza-webapp-admin/system.actionlog.yaml
@@ -9,29 +9,30 @@ list:
     timestamp: Timestamp
   loading: Loading actions
   details:
-    id: 'ID'
-    header: 'Details'
-    timestamp: 'Timestamp'
-    requestOrigin: 'Request Origin'
-    requestID: 'Request ID'
-    actorIPAddr: 'Actor/User'
-    actor: 'User'
-    actorID: 'User ID'
-    severity: 'Severity'
-    resource: 'Resource'
-    action: 'Action'
-    headerAdditional: 'Additional information'
-    description: 'Description'
-    error: 'Error'
+    id: ID
+    header: Details
+    timestamp: Timestamp
+    requestOrigin: Request Origin
+    requestID: Request ID
+    actorIPAddr: Actor/User
+    actor: User
+    actorID: User ID
+    severity: Severity
+    resource: Resource
+    action: Action
+    headerAdditional: Additional information
+    description: Description
+    error: Error
+    meta: Meta
   severity:
-    emergency: 'Emergency'
-    alert: 'Alert'
-    critical: 'Critical'
-    error: 'Error'
-    warning: 'Warning'
-    notice: 'Notice'
-    info: 'Info'
-    debug: 'Debug'
+    emergency: Emergency
+    alert: Alert
+    critical: Critical
+    error: Error
+    warning: Warning
+    notice: Notice
+    info: Info
+    debug: Debug
   filter:
     action: Action
     actor: User ID
diff --git a/locale/en/corteza-webapp-admin/system.settings.yaml b/locale/en/corteza-webapp-admin/system.settings.yaml
index 12fab79bd..37e76df99 100644
--- a/locale/en/corteza-webapp-admin/system.settings.yaml
+++ b/locale/en/corteza-webapp-admin/system.settings.yaml
@@ -123,6 +123,7 @@ editor:
 
 
     security:
+      title: Security
       prohibited-roles:
         description: Roles from this list will be removed from security context when authenticates with this provider
         label: Prohibited roles