fix: extended menu button (#10671)

app/gui2/src/components/DropdownMenu.vue

@@ -9,6 +9,7 @@ import { ref, shallowRef } from 'vue'
 
 const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{
+  title?: string | undefined
   placement?: Placement
 }>()
 
@@ -35,6 +36,7 @@ const { floatingStyles } = useFloating(rootElement, floatElement, {
     <MenuButton
       v-model="open"
       class="DropdownMenuButton"
+      :title="props.title"
       @pointerenter="hovered = true"
       @pointerleave="hovered = false"
     >
@@ -72,10 +74,10 @@ const { floatingStyles } = useFloating(rootElement, floatElement, {
   position: absolute;
   bottom: -5px;
   left: 50%;
-  transform: translateX(-50%) rotate(90deg) scale(0.7);
-  transform-origin: center;
   opacity: 0.5;
   /* Prevent the parent from receiving a pointerout event if the mouse is over the arrow, which causes flickering. */
   pointer-events: none;
+  --icon-transform: translateX(-50%) rotate(90deg) scale(0.7);
+  --icon-transform-origin: center;
 }
 </style>

app/gui2/src/components/ExtendedMenu.vue

@@ -24,10 +24,13 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
 </script>
 
 <template>
-  <DropdownMenu v-model:open="open" placement="bottom-end" class="ExtendedMenu">
-    <template #button
-      ><SvgButton name="3_dot_menu" class="moreIcon" title="Additional Options"
-    /></template>
+  <DropdownMenu
+    v-model:open="open"
+    placement="bottom-end"
+    class="ExtendedMenu"
+    title="Additional Options"
+  >
+    <template #button><SvgIcon name="3_dot_menu" class="moreIcon" /></template>
     <template #entries>
       <div>
         <div class="nonInteractive"><SvgIcon name="zoom" class="rowIcon" />Zoom</div>

app/gui2/src/components/TextFormattingSelector.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import MenuButton from '@/components/MenuButton.vue'
-import SvgButton from '@/components/SvgButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import { computed, ref, watch } from 'vue'
 import { TextFormatOptions } from './visualizations/TableVisualization.vue'
@@ -36,10 +35,10 @@ const changeFormat = (option: TextFormatOptions) => {
 </script>
 
 <template>
-  <DropdownMenu v-model:open="open" class="TextFormattingSelector">
+  <DropdownMenu v-model:open="open" class="TextFormattingSelector" title="Text Display Options">
     <template #button
       ><div :class="buttonClass">
-        <SvgIcon name="paragraph" title="Text Display Options" /></div
+        <SvgIcon name="paragraph" /></div
     ></template>
 
     <template #entries>
@@ -63,8 +62,8 @@ const changeFormat = (option: TextFormatOptions) => {
 
       <MenuButton
         class="off"
-        @click="() => changeFormat(TextFormatOptions.Off)"
         title="`No formatting applied to text`"
+        @click="() => changeFormat(TextFormatOptions.Off)"
       >
         <div class="strikethrough">
           <SvgIcon name="paragraph" />