Mobile input tweaks (#9686)

- Buttons are marked as `touch-manipulation` so double-tapping on them
doesn't initiate a zoom.
- Move scrubable inputs to usePointerSwipe
- Strangely, swipe direction was inverted on mobile. This solves the
issue and simplifies code
  - Moves event handlers into the scrubbable input component
- Make the slightly bigger buttons only apply when on mobile.
- Updates the workflows dropdown to have a check by the activeWorkflow
and truncate workflow names
- Displays dropzones (for the image preview) on mobile, but disables the
prompt to drag and drop an image if none is selected.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9686-Mobile-input-tweaks-31f6d73d3650811d9025d0cd1ac58534)
by [Unito](https://www.unito.io)

src/components/common/DropdownItem.vue

@@ -54,11 +54,12 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5" :class="item.icon" />
-    {{ item.label }}
+    <i class="size-5 shrink-0" :class="item.icon" />
+    <div class="mr-auto truncate" v-text="item.label" />
+    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
     <div
-      v-if="item.new"
-      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-else-if="item.new"
+      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>