[backport cloud/1.42] fix: App mode - Widget dropdowns clipped in sidebar (#10338) (#10909)

Backport of #10338. Conflict: modify/delete on linearMode.spec.ts — kept
new file.

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

src/components/builder/AppModeWidgetList.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
@@ -44,6 +45,7 @@ const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
 provide(HideLayoutFieldKey, true)
+provide(OverlayAppendToKey, 'body')
 
 const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
 useEventListener(

src/composables/useTransformCompatOverlayProps.ts

@@ -1,5 +1,6 @@
 import type { HintedString } from '@primevue/core'
-import { computed } from 'vue'
+import type { InjectionKey } from 'vue'
+import { computed, inject } from 'vue'
 
 /**
  * Options for configuring transform-compatible overlay props
@@ -15,6 +16,10 @@ interface TransformCompatOverlayOptions {
   // autoZIndex?: boolean
 }
 
+export const OverlayAppendToKey: InjectionKey<
+  HintedString<'body' | 'self'> | undefined | HTMLElement
+> = Symbol('OverlayAppendTo')
+
 /**
  * Composable that provides props to make PrimeVue overlay components
  * compatible with CSS-transformed parent elements.
@@ -41,8 +46,10 @@ interface TransformCompatOverlayOptions {
 export function useTransformCompatOverlayProps(
   overrides: TransformCompatOverlayOptions = {}
 ) {
+  const injectedAppendTo = inject(OverlayAppendToKey, undefined)
+
   return computed(() => ({
-    appendTo: 'self' as const,
+    appendTo: injectedAppendTo ?? ('self' as const),
     ...overrides
   }))
 }

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -4,6 +4,7 @@ import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import type {
@@ -50,6 +51,7 @@ interface Props {
 }
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -209,6 +211,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
       ref="popoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -4,6 +4,7 @@ import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type {
   FilterOption,
   OwnershipFilterOption,
@@ -15,6 +16,7 @@ import FormSearchInput from '../FormSearchInput.vue'
 import type { LayoutMode, SortOption } from './types'
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 defineProps<{
   sortOptions: SortOption[]
@@ -133,6 +135,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="sortPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -195,6 +198,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="ownershipPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -257,6 +261,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="baseModelPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {