adjust ui

app/controllers/template_folders_controller.rb

@@ -62,7 +62,7 @@ class TemplateFoldersController < ApplicationController
   end
 
   def render_infinite_scroll(pagy, templates, template_folders)
-    rendering =
+    render_params =
       if templates.present?
         { partial: 'templates/template', collection: templates }
       else
@@ -70,7 +70,7 @@ class TemplateFoldersController < ApplicationController
       end
 
     render turbo_stream: [
-      turbo_stream.before('infinite_scroll', **rendering),
+      turbo_stream.before('infinite_scroll', **render_params),
       turbo_stream.replace('infinite_scroll', partial: 'shared/infinite_scroll', locals: { pagy: })
     ]
   end

app/controllers/templates_dashboard_controller.rb

@@ -50,7 +50,7 @@ class TemplatesDashboardController < ApplicationController
   private
 
   def render_infinite_scroll(pagy, templates, template_folders)
-    rendering =
+    render_params =
       if templates.present?
         { partial: 'templates/template', collection: templates }
       else
@@ -58,7 +58,7 @@ class TemplatesDashboardController < ApplicationController
       end
 
     render turbo_stream: [
-      turbo_stream.before('infinite_scroll', **rendering),
+      turbo_stream.before('infinite_scroll', **render_params),
       turbo_stream.replace('infinite_scroll', partial: 'shared/infinite_scroll', locals: { pagy: })
     ]
   end

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"
           />