Visualization selector arrow is now more visible (#11800)

Fixes #11632

![image](https://github.com/user-attachments/assets/86b6fc6a-6ecc-41f1-9351-18c1b511776c)

CHANGELOG.md

@@ -55,6 +55,7 @@
   be opened on OS X][11755].
 - [Fix some UI elements drawing on top of visualization toolbar dropdown
   menus][11768].
+- [Arrows in some drop-down buttons are now clearly visible][11800]
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
@@ -88,6 +89,7 @@
 [11753]: https://github.com/enso-org/enso/pull/11753
 [11761]: https://github.com/enso-org/enso/pull/11761
 [11768]: https://github.com/enso-org/enso/pull/11768
+[11800]: https://github.com/enso-org/enso/pull/11800
 
 #### Enso Standard Library
 

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

@@ -63,9 +63,9 @@ const { floatingStyles } = useFloating(rootElement, floatElement, {
 
 .arrow {
   position: absolute;
-  bottom: -5px;
+  bottom: calc(-8px - var(--arrow-offset, 0px));
   left: 50%;
-  opacity: 0.5;
+  opacity: 0.8;
   /* 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);

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

@@ -79,6 +79,7 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
 
 <style scoped>
 .ExtendedMenu {
+  --arrow-offset: -5px;
   background: var(--color-frame-bg);
   border-radius: var(--radius-full);
   margin: 0 12px 0 auto;