Remove arrow from menus

src/sidebar/components/Annotation/AnnotationPublishControl.tsx

@@ -98,11 +98,6 @@ function AnnotationPublishControl({
           style={buttonStyle}
         >
           <Menu
-            arrowClass={classnames(
-              // Position up-pointing menu caret aligned beneath the
-              // down-pointing menu-open button icon
-              'right-[10px]',
-            )}
             containerPositioned={false}
             contentClass={classnames(
               // Ensure the menu is wide enough to "reach" the right-aligned

src/sidebar/components/GroupList/GroupList.tsx

@@ -81,21 +81,28 @@ function GroupList({ settings }: GroupListProps) {
     label = (
       <span
         className={classnames(
-          // Don't allow this label to shrink (wrap to next line)
-          'shrink-0 flex items-center gap-x-1 text-md text-color-text font-bold',
+          // Add some vertical padding so that the dropdown has some space
+          'py-1',
         )}
       >
-        {icon && (
-          <img
-            className={classnames(
-              // Tiny adjustment to make H logo align better with group name
-              'relative top-[1px] w-4 h-4',
-            )}
-            src={icon}
-            alt={altName}
-          />
-        )}
-        {focusedGroup.name}
+        <span
+          className={classnames(
+            // Don't allow this label to shrink (wrap to next line)
+            'shrink-0 flex items-center gap-x-1 text-md text-color-text font-bold',
+          )}
+        >
+          {icon && (
+            <img
+              className={classnames(
+                // Tiny adjustment to make H logo align better with group name
+                'relative top-[1px] w-4 h-4',
+              )}
+              src={icon}
+              alt={altName}
+            />
+          )}
+          {focusedGroup.name}
+        </span>
       </span>
     );
   } else {

src/sidebar/components/Menu.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import type { ComponentChildren } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 
-import MenuArrow from './MenuArrow';
 import MenuKeyboardNavigation from './MenuKeyboardNavigation';
 
 /**
@@ -21,13 +20,6 @@ export type MenuProps = {
    */
   align?: 'left' | 'right';
 
-  /**
-   * Additional CSS class for the arrow caret at the edge of the menu content
-   * that "points" toward the menu's toggle button. This can be used to adjust
-   * the position of that caret respective to the toggle button.
-   */
-  arrowClass?: string;
-
   /**
    * Label element or string for the toggle button that hides and shows the menu
    */
@@ -95,7 +87,6 @@ const noop = () => {};
  */
 export default function Menu({
   align = 'left',
-  arrowClass = '',
   children,
   containerPositioned = true,
   contentClass,
@@ -227,40 +218,28 @@ export default function Menu({
         </span>
       </button>
       {isOpen && (
-        <>
-          <MenuArrow
-            direction="up"
-            classes={classnames(
-              // Position menu-arrow caret near bottom right of menu label/toggle control
-              'right-1 top-[calc(100%-3px)] w-[15px]',
-              arrowClass,
-            )}
-          />
-          <div
-            className={classnames(
-              'focus-visible-ring',
-              // Position menu content near bottom of menu label/toggle control
-              'absolute top-[calc(100%+5px)] z-1',
-              'border shadow rounded-lg overflow-hidden bg-white text-md',
-              {
-                'left-0': align === 'left',
-                // Adding negative right distance so that the menu arrow does
-                // not overlap with the top-right corner when it's rounded
-                '-right-1': align === 'right',
-              },
-              contentClass,
-            )}
-            data-testid="menu-content"
-            role="menu"
-            tabIndex={-1}
-            onClick={closeMenu}
-            onKeyDown={handleMenuKeyDown}
-          >
-            <MenuKeyboardNavigation visible={true}>
-              {children}
-            </MenuKeyboardNavigation>
-          </div>
-        </>
+        <div
+          className={classnames(
+            'focus-visible-ring',
+            // Position menu content near bottom of menu label/toggle control
+            'absolute top-[calc(100%+3px)] z-1',
+            'border shadow rounded-lg overflow-hidden bg-white text-md',
+            {
+              'left-0': align === 'left',
+              'right-0': align === 'right',
+            },
+            contentClass,
+          )}
+          data-testid="menu-content"
+          role="menu"
+          tabIndex={-1}
+          onClick={closeMenu}
+          onKeyDown={handleMenuKeyDown}
+        >
+          <MenuKeyboardNavigation visible={true}>
+            {children}
+          </MenuKeyboardNavigation>
+        </div>
       )}
     </div>
   );

src/sidebar/components/test/Menu-test.js

@@ -217,7 +217,7 @@ describe('Menu', () => {
     assert.isTrue(wrapper.find(contentSelector).hasClass('left-0'));
 
     wrapper.setProps({ align: 'right' });
-    assert.isTrue(wrapper.find(contentSelector).hasClass('-right-1'));
+    assert.isTrue(wrapper.find(contentSelector).hasClass('right-0'));
   });
 
   it('applies custom content class', () => {
@@ -229,16 +229,6 @@ describe('Menu', () => {
     assert.isTrue(content.hasClass('special-menu'));
   });
 
-  it('applies custom arrow class', () => {
-    const wrapper = createMenu({
-      arrowClass: 'my-arrow-class',
-      defaultOpen: true,
-    });
-    const arrow = wrapper.find('MenuArrow');
-
-    assert.include(arrow.props().classes, 'my-arrow-class');
-  });
-
   it('has relative positioning if `containerPositioned` is `true`', () => {
     const wrapper = createMenu({
       containerPositioned: true, // default