Fix drop-down menu (#11744)

Fixes #11741

The styles of floating-ui were not applied, because any style is [not applied to a slot in general](https://stackoverflow.com/questions/47317479/styling-vue-slot).

(cherry picked from commit d53b85b)

app/gui/src/project-view/components/DropdownMenu.vue

@@ -2,11 +2,10 @@
 import MenuButton from '@/components/MenuButton.vue'
 import SizeTransition from '@/components/SizeTransition.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
-import { useUnrefHTMLElement } from '@/composables/events'
 import { injectInteractionHandler } from '@/providers/interactionHandler'
 import { endOnClickOutside } from '@/util/autoBlur'
 import { shift, useFloating, type Placement } from '@floating-ui/vue'
-import { ref, shallowRef, useTemplateRef, type VueElement } from 'vue'
+import { ref, shallowRef } from 'vue'
 
 const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{
@@ -16,8 +15,7 @@ const props = defineProps<{
 }>()
 
 const rootElement = shallowRef<HTMLElement>()
-const menuPanel = useTemplateRef<Element | VueElement | undefined | null>('menuPanel')
-const floatElement = useUnrefHTMLElement(menuPanel)
+const floatElement = shallowRef<HTMLElement>()
 const hovered = ref(false)
 
 injectInteractionHandler().setWhen(
@@ -51,7 +49,7 @@ const { floatingStyles } = useFloating(rootElement, floatElement, {
       class="arrow"
     />
     <SizeTransition height :duration="100">
-      <slot v-if="open" ref="menuPanel" name="menu" :style="floatingStyles" />
+      <div v-if="open" ref="floatElement" :style="floatingStyles"><slot name="menu" /></div>
     </SizeTransition>
   </div>
 </template>

app/gui/src/project-view/composables/events.ts

@@ -13,7 +13,6 @@ import {
   toValue,
   watch,
   watchEffect,
-  type ComputedRef,
   type Ref,
   type ShallowRef,
   type WatchSource,
@@ -185,16 +184,6 @@ export function unrefElement(
   return result
 }
 
-/** Returns a reactive value for the input element's root, if it is an HTML element. */
-export function useUnrefHTMLElement(
-  element: Ref<Element | undefined | null | VueInstance>,
-): ComputedRef<HTMLElement | undefined> {
-  return computed(() => {
-    const elementValue = unrefElement(element)
-    return elementValue instanceof HTMLElement ? elementValue : undefined
-  })
-}
-
 interface ResizeObserverData {
   refCount: number
   boundRectUsers: number