diff --git a/app/javascript/template_builder/dynamic_block_menu.vue b/app/javascript/template_builder/dynamic_block_menu.vue
index d2e9e8ffc..73d7aa67a 100644
--- a/app/javascript/template_builder/dynamic_block_menu.vue
+++ b/app/javascript/template_builder/dynamic_block_menu.vue
@@ -4,56 +4,43 @@
     :style="{ top: coords.top + 'px', left: coords.left + 'px', width: coords.width + 'px', height: coords.height + 'px' }"
   >
     <div
-      class="absolute left-0 flex items-center gap-0.5 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg pointer-events-auto"
-      :style="{ top: Math.max(coords.top - 40, 0) - coords.top + 'px' }"
+      ref="toolbar"
+      class="absolute left-0 flex flex-col sm:flex-row gap-0.5 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg pointer-events-auto"
+      :style="{ top: Math.max(coords.top - toolbarHeight - 2, 0) - coords.top + 'px' }"
       @mousedown.prevent
     >
-      <button
-        v-for="(icon, align) in alignIcons"
-        :key="align"
-        class="inline-flex items-center justify-center w-7 h-7 rounded-md hover:bg-neutral-100"
-        :class="{ 'bg-neutral-200': coords.align === align }"
-        :title="t(`align_${align}`)"
-        @click="$emit('command', 'setBlockAlign', align)"
+      <div
+        v-for="(row, rowIndex) in actionRows"
+        :key="rowIndex"
+        class="flex items-center gap-0.5"
       >
-        <component
-          :is="icon"
-          :width="16"
-          :height="16"
-          :stroke-width="1.6"
-        />
-      </button>
-      <div class="w-px h-5 bg-neutral-200 mx-1" />
-      <template v-if="coords.type === 'table'">
-        <button
-          v-for="action in tableActions"
-          :key="action.title"
-          class="inline-flex items-center justify-center w-7 h-7 rounded-md"
-          :class="[{ 'text-red-600': action.danger }, isDisabled(action) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-neutral-100']"
-          :title="action.structural && !coords.isRegular ? t('irregular_table_structure') : t(action.title)"
-          :disabled="isDisabled(action)"
-          @click="$emit('command', action.command, action.arg)"
+        <template
+          v-for="(group, groupIndex) in row"
+          :key="groupIndex"
         >
-          <component
-            :is="action.icon"
-            :width="16"
-            :height="16"
-            :stroke-width="1.6"
+          <div
+            v-if="rowIndex > 0 || groupIndex > 0"
+            class="w-px h-5 bg-neutral-200 mx-1"
+            :class="{ 'hidden sm:block': rowIndex > 0 && groupIndex === 0 }"
           />
-        </button>
-      </template>
-      <button
-        v-else
-        class="inline-flex items-center justify-center w-7 h-7 rounded-md hover:bg-neutral-100 text-red-600"
-        :title="t('delete_image')"
-        @click="$emit('command', 'deleteSelection')"
-      >
-        <IconTrash
-          :width="16"
-          :height="16"
-          :stroke-width="1.6"
-        />
-      </button>
+          <button
+            v-for="action in group"
+            :key="action.title"
+            class="inline-flex items-center justify-center w-7 h-7 rounded-md"
+            :class="[{ 'text-red-600': action.danger, 'bg-neutral-200': action.active }, isDisabled(action) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-neutral-100']"
+            :title="action.structural && !coords.isRegular ? t('irregular_table_structure') : t(action.title)"
+            :disabled="isDisabled(action)"
+            @click="$emit('command', action.command, action.arg)"
+          >
+            <component
+              :is="action.icon"
+              :width="16"
+              :height="16"
+              :stroke-width="1.6"
+            />
+          </button>
+        </template>
+      </div>
     </div>
     <div
       v-if="size && coords.type === 'table'"
@@ -62,10 +49,10 @@
     />
     <div
       v-if="coords.type === 'table'"
-      class="absolute w-3 h-3 bg-white border-2 border-blue-500 rounded-sm pointer-events-auto cursor-nwse-resize"
+      class="absolute w-3 h-3 bg-white border-2 border-blue-500 rounded-sm pointer-events-auto cursor-nwse-resize touch-none before:absolute before:-inset-3 before:content-['']"
       :style="{ left: (size?.width ?? coords.width) - 6 + 'px', top: (size?.height ?? coords.height) - 6 + 'px' }"
       :title="t('resize')"
-      @mousedown.prevent.stop="startResize"
+      @pointerdown.prevent.stop="startResize"
     />
   </div>
 </template>
@@ -89,9 +76,6 @@ const IconSplitCell = (props) => h('svg', { xmlns: 'http://www.w3.org/2000/svg',
 
 export default {
   name: 'DynamicBlockMenu',
-  components: {
-    IconTrash
-  },
   inject: ['t'],
   props: {
     coords: {
@@ -102,34 +86,55 @@ export default {
   emits: ['command', 'resize'],
   data () {
     return {
-      size: null
+      size: null,
+      toolbarHeight: 38
     }
   },
   computed: {
-    alignIcons () {
-      return {
-        left: IconAlignLeft,
-        center: IconAlignCenter,
-        right: IconAlignRight
+    actionRows () {
+      const alignActions = [
+        { command: 'setBlockAlign', arg: 'left', icon: IconAlignLeft, title: 'align_left', active: this.coords.align === 'left' },
+        { command: 'setBlockAlign', arg: 'center', icon: IconAlignCenter, title: 'align_center', active: this.coords.align === 'center' },
+        { command: 'setBlockAlign', arg: 'right', icon: IconAlignRight, title: 'align_right', active: this.coords.align === 'right' }
+      ]
+
+      if (this.coords.type !== 'table') {
+        return [[alignActions, [{ command: 'deleteSelection', icon: IconTrash, title: 'delete_image', danger: true }]]]
       }
-    },
-    tableActions () {
+
       return [
-        { command: 'addTableRow', arg: false, icon: IconRowInsertTop, title: 'insert_row_above', structural: true },
-        { command: 'addTableRow', arg: true, icon: IconRowInsertBottom, title: 'insert_row_below', structural: true },
-        { command: 'addTableColumn', arg: false, icon: IconColumnInsertLeft, title: 'insert_column_left', structural: true },
-        { command: 'addTableColumn', arg: true, icon: IconColumnInsertRight, title: 'insert_column_right', structural: true },
-        { command: 'mergeTableCells', icon: IconMergeCells, title: 'merge_cells', structural: true, enabled: 'canMerge' },
-        { command: 'splitTableCell', icon: IconSplitCell, title: 'split_cell', structural: true, enabled: 'canSplit' },
-        { command: 'deleteTableRow', icon: IconRowRemove, title: 'delete_row', danger: true, structural: true },
-        { command: 'deleteTableColumn', icon: IconColumnRemove, title: 'delete_column', danger: true, structural: true },
-        { command: 'deleteTable', icon: IconTrash, title: 'delete_table', danger: true }
+        [
+          alignActions,
+          [
+            { command: 'addTableRow', arg: false, icon: IconRowInsertTop, title: 'insert_row_above', structural: true },
+            { command: 'addTableRow', arg: true, icon: IconRowInsertBottom, title: 'insert_row_below', structural: true },
+            { command: 'addTableColumn', arg: false, icon: IconColumnInsertLeft, title: 'insert_column_left', structural: true },
+            { command: 'addTableColumn', arg: true, icon: IconColumnInsertRight, title: 'insert_column_right', structural: true }
+          ]
+        ],
+        [
+          [
+            { command: 'mergeTableCells', icon: IconMergeCells, title: 'merge_cells', structural: true, enabled: 'canMerge' },
+            { command: 'splitTableCell', icon: IconSplitCell, title: 'split_cell', structural: true, enabled: 'canSplit' }
+          ],
+          [
+            { command: 'deleteTableRow', icon: IconRowRemove, title: 'delete_row', danger: true, structural: true },
+            { command: 'deleteTableColumn', icon: IconColumnRemove, title: 'delete_column', danger: true, structural: true },
+            { command: 'deleteTable', icon: IconTrash, title: 'delete_table', danger: true }
+          ]
+        ]
       ]
     }
   },
+  mounted () {
+    this.toolbarHeight = this.$refs.toolbar.offsetHeight
+  },
+  updated () {
+    this.toolbarHeight = this.$refs.toolbar.offsetHeight
+  },
   beforeUnmount () {
-    window.removeEventListener('mousemove', this.onResizeMove)
-    window.removeEventListener('mouseup', this.onResizeEnd)
+    window.removeEventListener('pointermove', this.onResizeMove)
+    window.removeEventListener('pointerup', this.onResizeEnd)
   },
   methods: {
     isDisabled (action) {
@@ -139,8 +144,8 @@ export default {
       this.resizeStart = { x: event.clientX, y: event.clientY, width: this.coords.width, height: this.coords.height }
       this.size = { width: this.coords.width, height: this.coords.height }
 
-      window.addEventListener('mousemove', this.onResizeMove)
-      window.addEventListener('mouseup', this.onResizeEnd)
+      window.addEventListener('pointermove', this.onResizeMove)
+      window.addEventListener('pointerup', this.onResizeEnd)
     },
     onResizeMove (event) {
       const { x, y, width, height } = this.resizeStart
@@ -150,8 +155,8 @@ export default {
       }
     },
     onResizeEnd () {
-      window.removeEventListener('mousemove', this.onResizeMove)
-      window.removeEventListener('mouseup', this.onResizeEnd)
+      window.removeEventListener('pointermove', this.onResizeMove)
+      window.removeEventListener('pointerup', this.onResizeEnd)
 
       if (this.size.width !== this.coords.width || this.size.height !== this.coords.height) {
         this.$emit('resize', this.size)
diff --git a/app/javascript/template_builder/dynamic_editor.js b/app/javascript/template_builder/dynamic_editor.js
index c1475fd64..ef25279c6 100644
--- a/app/javascript/template_builder/dynamic_editor.js
+++ b/app/javascript/template_builder/dynamic_editor.js
@@ -104,15 +104,24 @@ img.ProseMirror-separator {
 }
 
 [data-resize-handle] {
+  --handle-size: calc(10px / var(--zoom, 1));
   display: none;
-  width: 10px;
-  height: 10px;
+  width: var(--handle-size);
+  height: var(--handle-size);
   background: #ffffff;
-  border: 2px solid #3b82f6;
+  border: calc(2px / var(--zoom, 1)) solid #3b82f6;
   border-radius: 2px;
   z-index: 1;
 }
 
+@media (pointer: coarse) {
+  [data-resize-handle]::after {
+    content: "";
+    position: absolute;
+    inset: calc(-8px / var(--zoom, 1));
+  }
+}
+
 .ProseMirror-selectednode [data-resize-wrapper] {
   outline: 2px solid #3b82f6;
 }
@@ -121,10 +130,10 @@ img.ProseMirror-separator {
   display: block;
 }
 
-[data-resize-handle="top-left"] { margin: -5px 0 0 -5px; cursor: nwse-resize; }
-[data-resize-handle="top-right"] { margin: -5px -5px 0 0; cursor: nesw-resize; }
-[data-resize-handle="bottom-left"] { margin: 0 0 -5px -5px; cursor: nesw-resize; }
-[data-resize-handle="bottom-right"] { margin: 0 -5px -5px 0; cursor: nwse-resize; }
+[data-resize-handle="top-left"] { margin: calc(var(--handle-size) / -2) 0 0 calc(var(--handle-size) / -2); cursor: nwse-resize; }
+[data-resize-handle="top-right"] { margin: calc(var(--handle-size) / -2) calc(var(--handle-size) / -2) 0 0; cursor: nesw-resize; }
+[data-resize-handle="bottom-left"] { margin: 0 0 calc(var(--handle-size) / -2) calc(var(--handle-size) / -2); cursor: nesw-resize; }
+[data-resize-handle="bottom-right"] { margin: 0 calc(var(--handle-size) / -2) calc(var(--handle-size) / -2) 0; cursor: nwse-resize; }
 
 .ProseMirror .selectedCell {
   position: relative;
diff --git a/app/javascript/template_builder/dynamic_menu.vue b/app/javascript/template_builder/dynamic_menu.vue
index 059243512..a4b0c2335 100644
--- a/app/javascript/template_builder/dynamic_menu.vue
+++ b/app/javascript/template_builder/dynamic_menu.vue
@@ -9,7 +9,7 @@
     <div class="flex items-center gap-0.5">
       <div class="relative">
         <button
-          class="flex items-center justify-between gap-1 w-36 h-7 px-2 border border-neutral-200 rounded-md hover:bg-neutral-100"
+          class="flex items-center justify-between gap-1 w-24 sm:w-36 h-7 px-2 border border-neutral-200 rounded-md hover:bg-neutral-100"
           :title="t('font')"
           @click="toggleDropdown('font')"
         >
@@ -51,7 +51,7 @@
       </div>
       <div class="relative">
         <button
-          class="flex items-center justify-between gap-1 w-16 h-7 px-2 border border-neutral-200 rounded-md hover:bg-neutral-100"
+          class="flex items-center justify-between gap-1 w-12 sm:w-16 h-7 px-2 border border-neutral-200 rounded-md hover:bg-neutral-100"
           :title="t('font_size')"
           @click="toggleDropdown('size')"
         >
@@ -305,9 +305,9 @@
         </div>
       </div>
       <template v-if="!isCellSelection">
-        <div class="w-px h-5 bg-neutral-200 mx-1" />
+        <div class="w-px h-5 bg-neutral-200 mx-1 sm:mx-0.5" />
         <button
-          class="inline-flex items-center justify-center text-xs h-7 rounded-md hover:bg-neutral-100"
+          class="inline-flex items-center justify-center text-xs h-7 px-1 rounded-md hover:bg-neutral-100"
           :title="t('create_variable')"
           @click="wrapVariable"
         >
@@ -316,12 +316,12 @@
             :height="16"
             :stroke-width="1.6"
           />
-          <span class="px-0.5">
+          <span class="hidden sm:inline px-0.5">
             {{ t('variable') }}
           </span>
         </button>
         <button
-          class="inline-flex items-center justify-center text-xs h-7 rounded-md hover:bg-neutral-100"
+          class="inline-flex items-center justify-center text-xs h-7 px-1 rounded-md hover:bg-neutral-100"
           :title="t('create_condition')"
           @click="wrapCondition"
         >
@@ -348,7 +348,7 @@
               font-family="ui-sans-serif, system-ui, sans-serif"
             >if</text>
           </svg>
-          <span class="px-0.5">
+          <span class="hidden sm:inline px-0.5">
             {{ t('condition') }}
           </span>
         </button>
diff --git a/app/javascript/template_builder/dynamic_section.vue b/app/javascript/template_builder/dynamic_section.vue
index 73e7b3c84..b8187db05 100644
--- a/app/javascript/template_builder/dynamic_section.vue
+++ b/app/javascript/template_builder/dynamic_section.vue
@@ -8,7 +8,7 @@
       class="absolute pointer-events-none z-10 bg-black"
       :style="{ width: '1px', height: cursorHighlightCoords.height + 'px', left: cursorHighlightCoords.x + 'px', top: cursorHighlightCoords.y + 'px' }"
     />
-    <div :style="{ zoom: containerWidth / sectionWidthPx }">
+    <div :style="{ zoom, '--zoom': zoom }">
       <section
         :id="section.id"
         ref="editorElement"