Dev

app/components/board/BoardSection.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   section: BoardSection
 }>()
 
-const { isEditing, markDirty } = useEditMode()
+const { isEditing, showWidgetPicker, markDirty } = useEditMode()
 const store = useBoardStore()
 
 const showSettings = ref(false)
@@ -104,6 +104,11 @@ function toggleCollapse() {
         group="widgets"
         :animation="150"
         ghost-class="opacity-30"
+        :force-fallback="true"
+        :fallback-on-body="true"
+        :fallback-tolerance="3"
+        filter=".no-drag"
+        :prevent-on-filter="false"
         class="grid gap-4"
         :class="gridClass"
         @change="onDragChange"
@@ -118,9 +123,10 @@ function toggleCollapse() {
       </VueDraggable>
       <!-- eslint-enable vue/no-mutating-props -->
 
-      <div
+      <button
         v-if="section.widgets.length === 0 && isEditing"
-        class="border-2 border-dashed border-default rounded-lg p-8 text-center text-dimmed"
+        class="w-full border-2 border-dashed border-default rounded-lg p-8 text-center text-dimmed hover:border-primary hover:text-muted transition-colors cursor-pointer"
+        @click="showWidgetPicker = true"
       >
         <UIcon
           name="i-lucide-plus"
@@ -129,7 +135,7 @@ function toggleCollapse() {
         <p class="text-sm">
           Drag widgets here or add from the widget picker
         </p>
-      </div>
+      </button>
     </div>
 
     <EditorSectionSettings

app/components/board/BoardToolbar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const store = useBoardStore()
-const { isEditing, hasUnsavedChanges, enterEditMode, exitEditMode, markDirty } = useEditMode()
-
-const showWidgetPicker = ref(false)
+const { isEditing, hasUnsavedChanges, showWidgetPicker, enterEditMode, exitEditMode, markDirty } = useEditMode()
 const showBoardSettings = ref(false)
 
 const toast = useToast()

app/components/board/BoardView.vue

@@ -14,6 +14,9 @@ const { isEditing, markDirty } = useEditMode()
       handle=".section-handle"
       :animation="150"
       ghost-class="opacity-30"
+      :force-fallback="true"
+      :fallback-on-body="true"
+      :fallback-tolerance="3"
       class="flex flex-col gap-6"
       @change="markDirty"
     >

app/components/editor/EditorContextMenu.vue

@@ -11,6 +11,7 @@ const store = useBoardStore()
 const { markDirty } = useEditMode()
 
 const showSettings = ref(false)
+const menuOpen = ref(false)
 
 const items = computed(() => {
   if (props.disabled) return []
@@ -113,18 +114,14 @@ const items = computed(() => {
 
 <template>
   <div class="relative">
-    <UContextMenu
-      :items="items"
-      :disabled="disabled"
-    >
-      <slot />
-    </UContextMenu>
+    <slot />
 
     <div
       v-if="!disabled"
-      class="absolute top-1.5 right-1.5 z-10"
+      class="no-drag absolute top-1.5 right-1.5 z-10"
     >
       <UDropdownMenu
+        v-model:open="menuOpen"
         :items="items"
         :content="{ align: 'end' }"
       >

app/components/widgets/WidgetWrapper.vue

@@ -41,7 +41,7 @@ function pluginsAt(position: string) {
       :color="cardColor"
       class="relative h-full transition-all duration-200"
       :class="{
-        'ring-2 ring-primary/30 hover:ring-primary/50': isEditing,
+        'ring-2 ring-primary/30 hover:ring-primary/50 select-none': isEditing,
         'ring-2 ring-primary/30': isAccent && !isEditing,
         'hover:ring-1 hover:ring-accented cursor-pointer': isLinkable && !isEditing
       }"

app/composables/useEditMode.ts

@@ -1,6 +1,7 @@
 export function useEditMode() {
   const isEditing = useState('editMode', () => false)
   const hasUnsavedChanges = useState('unsavedChanges', () => false)
+  const showWidgetPicker = useState('showWidgetPicker', () => false)
 
   function enterEditMode() {
     isEditing.value = true
@@ -20,6 +21,7 @@ export function useEditMode() {
   return {
     isEditing,
     hasUnsavedChanges,
+    showWidgetPicker,
     enterEditMode,
     exitEditMode,
     markDirty