From fdb0610da80fd3b26d654feb7875572fc6b35603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 30 Nov 2023 12:41:26 +0100
Subject: [PATCH] Fix record field viewer description not being in new line

---
 .../ModuleFields/Editor/DateTime.vue          |  1 -
 .../src/components/PageBlocks/RecordBase.vue  | 55 ++++++++++---------
 .../components/PageBlocks/RecordEditor.vue    | 24 +++++---
 .../src/themes/corteza-base/custom.scss       | 10 ++++
 4 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
index 051543b32..91889bf49 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
+++ b/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
diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
index cb1597a05..0183f6b15 100644
--- a/client/web/compose/src/components/PageBlocks/RecordBase.vue
+++ b/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
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index dbf8eb078..45d7c3f81 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/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
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 263190e1f..d63a77712 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/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