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

@@ -79,6 +79,12 @@ function GroupList({ settings }: GroupListProps) {
     // and pass an empty string.
     const altName = orgName(focusedGroup) ? orgName(focusedGroup) : '';
     label = (
+      <span
+        className={classnames(
+          // Add some vertical padding so that the dropdown has some space
+          'py-1',
+        )}
+      >
         <span
           className={classnames(
             // Don't allow this label to shrink (wrap to next line)
@@ -97,6 +103,7 @@ function GroupList({ settings }: GroupListProps) {
           )}
           {focusedGroup.name}
         </span>
+      </span>
     );
   } else {
     label = <span>…</span>;

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,26 +218,15 @@ 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',
+            'absolute top-[calc(100%+3px)] 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',
+              'right-0': align === 'right',
             },
             contentClass,
           )}
@@ -260,7 +240,6 @@ export default function Menu({
             {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