From fc6dbe8bfb930a2b06c0f89323f325d82515db39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 5 Jul 2023 14:20:13 +0200
Subject: [PATCH] WIP

---
 .../compose/src/components/Common/Hint.vue    |  2 +-
 .../components/ModuleFields/Editor/String.vue | 35 ++++++++-----------
 .../src/components/PageBlocks/RecordBase.vue  | 22 +++++++-----
 .../components/PageBlocks/RecordEditor.vue    |  4 +--
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/client/web/compose/src/components/Common/Hint.vue b/client/web/compose/src/components/Common/Hint.vue
index f22b108aad..def0a938bf 100644
--- a/client/web/compose/src/components/Common/Hint.vue
+++ b/client/web/compose/src/components/Common/Hint.vue
@@ -2,7 +2,7 @@
   <div
     v-if="text"
     :id="id"
-    class="ml-1"
+    class="d-flex align-items-center ml-2"
   >
     <font-awesome-icon
       :icon="['far', 'question-circle']"
diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
index 1a25ad3b2b..596c6c5562 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/String.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -1,6 +1,6 @@
 <template>
   <b-form-group
-    label-class="text-primary"
+    label-class="d-flex align-items-center text-primary p-0"
     :state="state"
     :class="formGroupStyleClasses"
   >
@@ -8,28 +8,23 @@
       v-if="!valueOnly"
       #label
     >
-      <div
-        class="d-flex align-items-top"
-      >
-        <label
-          class="mb-0"
-        >
-          {{ label }}
-        </label>
+      <span class="d-inline-block text-truncate mw-100 py-1">
+        {{ label }}
+      </span>
 
-        <hint
-          :id="field.fieldID"
-          :text="hint"
-        />
-      </div>
-
-      <small
-        class="form-text font-weight-light text-muted"
-      >
-        {{ description }}
-      </small>
+      <hint
+        :id="field.fieldID"
+        :text="hint"
+      />
     </template>
 
+    <div
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
+    >
+      {{ description }}
+    </div>
+
     <multi
       v-if="field.isMulti"
       v-slot="ctx"
diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
index 109018c63e..93cf1da394 100644
--- a/client/web/compose/src/components/PageBlocks/RecordBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -23,24 +23,26 @@
           v-if="canDisplay(field)"
         >
           <label
-            class="text-primary mb-0 d-flex align-items-center"
-            :class="{ 'mb-0': !!(field.options.description || {}).view || false }"
+            class="d-flex align-items-center text-primary mb-0"
           >
-            {{ field.label || field.name }}
+            <span class="d-inline-block text-truncate mw-100 py-1">
+              {{ field.label || field.name }}
+            </span>
+
             <hint
               :id="field.fieldID"
               :text="((field.options.hint || {}).view || '')"
-              class="d-inline-block"
             />
 
             <div
-              v-if="options.inlineRecordEditEnabled && isFieldEditable(field) && !editable"
+              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
               class="inline-actions ml-2"
             >
               <b-button
                 :title="$t('field.inlineEdit.button.title')"
                 variant="outline-light"
                 size="sm"
+                :disabled="editable"
                 class="text-secondary border-0"
                 @click="editInlineField(fieldRecord, field)"
               >
@@ -51,14 +53,16 @@
             </div>
           </label>
 
-          <small
-            class="text-muted"
+          <div
+            class="small text-muted"
+            :class="{ 'mb-1': !!(field.options.description || {}).view }"
           >
             {{ (field.options.description || {}).view }}
-          </small>
+          </div>
+
           <div
             v-if="field.canReadRecordValue"
-            class="value mt-2"
+            class="value mt-1"
           >
             <field-viewer
               v-bind="{ ...$props, field }"
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index e98773e5ee..8b1ddd89f6 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -13,12 +13,12 @@
 
     <div
       v-else-if="module"
-      class="mt-3 px-3"
+      class="mt-3"
     >
       <div
         v-for="field in fields"
         :key="field.id"
-        :class="{ 'd-flex flex-column': canDisplay(field) }"
+        :class="{ 'd-flex flex-column mb-3 px-3': canDisplay(field) }"
       >
         <template
           v-if="canDisplay(field)"