adjust ui

app/javascript/template_builder/contenteditable.vue

@@ -10,7 +10,7 @@
       :data-placeholder="placeholder"
       :data-empty="isEmpty"
       :style="{ minWidth }"
-      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '', { 'py-2 -my-2': isMobile && iconInline && !isEmpty }]"
+      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '', contenteditableClasses]"
       class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-400 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
@@ -23,15 +23,15 @@
       {{ value }}
     </span>
     <span
-      v-if="withButton && !isMobile"
+      v-if="withButton && (!isMobile || editableOnButton)"
       class="relative inline"
       :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
     >
       <IconPencil
-        class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle pl-1"
+        class="cursor-pointer flex-none align-middle pl-1"
         :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
         :title="t('edit')"
-        :class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
+        :class="{ invisible: !editable, 'opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100': !isMobile, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
         :width="iconWidth + 4"
         :stroke-width="iconStrokeWidth"
         @click="clickEdit"
@@ -109,6 +109,11 @@ export default {
       type: Number,
       required: false,
       default: 2
+    },
+    contenteditableClasses: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   emits: ['update:model-value', 'focus', 'blur', 'click-contenteditable'],

app/javascript/template_builder/field.vue

@@ -29,6 +29,7 @@
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
+            :contenteditable-classes="isMobile ? 'py-2 -my-2' : ''"
             @focus="[onNameFocus(), scrollOnEdit && scrollToFirstArea()]"
             @blur="onNameBlur"
           />