Fix record field viewer description not being in new line

client/web/compose/src/components/ModuleFields/Editor/DateTime.vue

@@ -4,7 +4,6 @@
     :label-cols-xl="horizontal && '4'"
     :content-cols-md="horizontal && '7'"
     :content-cols-xl="horizontal && '8'"
-    label-class="text-primary"
     :class="formGroupStyleClasses"
   >
     <template

client/web/compose/src/components/PageBlocks/RecordBase.vue

@@ -12,42 +12,45 @@
 
     <div
       v-else-if="fieldModule"
-      class="mt-3"
+      class="mt-3 px-3"
     >
       <template v-for="field in fields">
         <b-form-group
           v-if="canDisplay(field)"
           :key="field.id"
-          :label-cols-md="options.horizontalFieldLayoutEnabled && '5'"
-          :label-cols-xl="options.horizontalFieldLayoutEnabled && '4'"
-          :content-cols-md="options.horizontalFieldLayoutEnabled && '7'"
-          :content-cols-xl="options.horizontalFieldLayoutEnabled && '8'"
-          label-class="d-flex align-items-center text-primary mb-0"
-          class="field-container mb-3 px-3"
+          :label-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+          :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
+          :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+          :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
+          class="field-container mb-3"
         >
           <template #label>
-            <span class="d-inline-block mw-100 py-1">
-              {{ field.label || field.name }}
-            </span>
-
-            <c-hint :tooltip="((field.options.hint || {}).view || '')" />
-
             <div
-              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
-              class="inline-actions ml-2"
+              class="d-flex align-items-center text-primary mb-0"
             >
-              <b-button
-                :title="$t('field.inlineEdit.button.title')"
-                variant="outline-light"
-                size="sm"
-                :disabled="editable"
-                class="text-secondary border-0"
-                @click="editInlineField(fieldRecord, field)"
+              <span class="d-inline-block mw-100 py-1">
+                {{ field.label || field.name }}
+              </span>
+
+              <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+
+              <div
+                v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
+                class="inline-actions ml-2"
               >
-                <font-awesome-icon
-                  :icon="['fas', 'pen']"
-                />
-              </b-button>
+                <b-button
+                  :title="$t('field.inlineEdit.button.title')"
+                  variant="outline-light"
+                  size="sm"
+                  :disabled="editable"
+                  class="text-secondary border-0"
+                  @click="editInlineField(fieldRecord, field)"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'pen']"
+                  />
+                </b-button>
+              </div>
             </div>
 
             <div

client/web/compose/src/components/PageBlocks/RecordEditor.vue

@@ -13,13 +13,13 @@
 
     <div
       v-else-if="module"
-      class="mt-3"
+      class="mt-3 px-3"
     >
       <template v-for="field in fields">
         <div
           v-if="canDisplay(field)"
           :key="field.id"
-          class="mb-3 px-3"
+          class="mb-3"
         >
           <field-editor
             v-if="isFieldEditable(field)"
@@ -35,14 +35,24 @@
             :label-cols-xl="horizontal && '4'"
             :content-cols-md="horizontal && '7'"
             :content-cols-xl="horizontal && '8'"
-            label-class="d-flex align-items-center text-primary mb-0"
           >
             <template #label>
-              <span class="d-inline-block text-truncate mw-100 py-1">
-                {{ field.label || field.name }}
-              </span>
+              <div
+                class="d-flex align-items-center text-primary mb-0"
+              >
+                <span class="d-inline-block mw-100 py-1">
+                  {{ field.label || field.name }}
+                </span>
 
-              <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+              </div>
+
+              <div
+                class="small text-muted"
+                :class="{ 'mb-1': !!(field.options.description || {}).view }"
+              >
+                {{ (field.options.description || {}).view }}
+              </div>
             </template>
 
             <div

client/web/compose/src/themes/corteza-base/custom.scss

@@ -367,6 +367,16 @@ fieldset.required {
 
 .col-form-label {
   padding: 0;
+  padding-right: 5px !important;
+}
+
+.form-row {
+  margin: 0;
+
+  [class*="col-"] {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 // Supporting CSS to improve print-to-PDF option