Inhibit clipping when dropdown is opened

app/gui2/src/components/GraphEditor/NodeWidgetTree.vue

@@ -7,7 +7,7 @@ import { provideWidgetTree } from '@/providers/widgetTree'
 import { useGraphStore, type NodeId } from '@/stores/graph'
 import { Ast } from '@/util/ast'
 import type { Icon } from '@/util/iconName'
-import { computed, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 
 const props = defineProps<{
   ast: Ast.Ast
@@ -65,6 +65,8 @@ function handleWidgetUpdates(update: WidgetUpdate) {
   return true
 }
 
+const deepDisableClipping = ref(false)
+
 const layoutTransitions = useTransitioning(observedLayoutTransitions)
 provideWidgetTree(
   toRef(props, 'ast'),
@@ -77,6 +79,7 @@ provideWidgetTree(
   () => {
     emit('openFullMenu')
   },
+  (clippingInhibitorsExist) => (deepDisableClipping.value = clippingInhibitorsExist),
 )
 </script>
 <script lang="ts">
@@ -86,7 +89,12 @@ export const ICON_WIDTH = 16
 </script>
 
 <template>
-  <div class="NodeWidgetTree" spellcheck="false" v-on="layoutTransitions.events">
+  <div
+    class="NodeWidgetTree"
+    :class="{ deepDisableClipping }"
+    spellcheck="false"
+    v-on="layoutTransitions.events"
+  >
     <!-- Display an icon for the node if no widget in the tree provides one. -->
     <SvgIcon
       v-if="!props.connectedSelfArgumentId"
@@ -128,4 +136,8 @@ export const ICON_WIDTH = 16
   color: white;
   margin: 0 v-bind('GRAB_HANDLE_X_MARGIN_PX');
 }
+
+.deepDisableClipping :deep(.overridableClipState) {
+  overflow: visible !important;
+}
 </style>

app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue

@@ -48,7 +48,10 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
       <NodeWidget :input="WidgetInput.FromAst(application.infixOperator)" />
     </div>
     <Transition name="collapse-argument">
-      <div v-if="tree.extended || !application.argument.hideByDefault" class="argument">
+      <div
+        v-if="tree.extended || !application.argument.hideByDefault"
+        class="argument overridableClipState"
+      >
         <NodeWidget :input="application.argument.toWidgetInput()" nest />
       </div>
     </Transition>

app/gui2/src/components/widgets/DropdownWidget.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon.vue'
+import { injectWidgetTree } from '@/providers/widgetTree'
 import type { Icon } from '@/util/iconName'
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 enum SortDirection {
   none = 'none',
@@ -12,6 +13,14 @@ enum SortDirection {
 const props = defineProps<{ color: string; selectedValue: string | undefined; values: string[] }>()
 const emit = defineEmits<{ click: [index: number, keepOpen: boolean] }>()
 
+const tree = injectWidgetTree()
+
+let endClippingInhibition: (() => void) | undefined
+onMounted(() => {
+  endClippingInhibition = tree.inhibitClipping()
+})
+onUnmounted(() => endClippingInhibition?.())
+
 const sortDirection = ref<SortDirection>(SortDirection.none)
 
 const sortedValuesAndIndices = computed(() => {

app/gui2/src/providers/widgetTree.ts

@@ -5,6 +5,20 @@ import { Ast } from '@/util/ast'
 import type { Icon } from '@/util/iconName'
 import { computed, proxyRefs, type Ref } from 'vue'
 
+function makeExistenceRegistry(onChange: (anyExist: boolean) => void) {
+  const registered = new Set<number>()
+  let nextId = 0
+  return () => {
+    const id = nextId++
+    if (registered.size === 0) onChange(true)
+    registered.add(id)
+    return () => {
+      registered.delete(id)
+      if (registered.size === 0) onChange(false)
+    }
+  }
+}
+
 export { injectFn as injectWidgetTree, provideFn as provideWidgetTree }
 const { provideFn, injectFn } = createContextStore(
   'Widget tree',
@@ -17,9 +31,11 @@ const { provideFn, injectFn } = createContextStore(
     extended: Ref<boolean>,
     hasActiveAnimations: Ref<boolean>,
     emitOpenFullMenu: () => void,
+    clippingInhibitorsChanged: (anyExist: boolean) => void,
   ) => {
     const graph = useGraphStore()
     const nodeSpanStart = computed(() => graph.moduleSource.getSpan(astRoot.value.id)![0])
+    const inhibitClipping = makeExistenceRegistry(clippingInhibitorsChanged)
     return proxyRefs({
       astRoot,
       nodeId,
@@ -30,6 +46,7 @@ const { provideFn, injectFn } = createContextStore(
       nodeSpanStart,
       hasActiveAnimations,
       emitOpenFullMenu,
+      inhibitClipping,
     })
   },
 )