Fix actions on indexes table

Author: kraenhansen

packages/compass-indexes/src/components/indexes-table/indexes-table.tsx

@@ -54,15 +54,13 @@ const rowStyles = css({
 
 // When row is not hovered, we hide the delete button
 const indexActionsCellStyles = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
   button: {
     opacity: 0,
     '&:focus': {
       opacity: 1,
     },
   },
-  minWidth: spacing[5],
+  minWidth: spacing[800],
 });
 
 const tableHeadStyles = css({
@@ -157,16 +155,16 @@ export function IndexesTable<T>({
                 }`}
               >
                 {row.getVisibleCells().map((cell: LeafyGreenTableCell<T>) => {
+                  const isActionsCell = cell.column.id === 'actions';
                   return (
                     <Cell
                       key={cell.id}
                       id={cell.id}
                       cell={cell}
-                      className={cx(
-                        cell.column.id === 'actions' && indexActionsCellStyles,
-                        cell.column.id === 'actions' &&
-                          indexActionsCellClassName
-                      )}
+                      className={cx({
+                        [indexActionsCellClassName]: isActionsCell,
+                        [indexActionsCellStyles]: isActionsCell,
+                      })}
                       data-testid={`${dataTestId}-${cell.column.id}-field`}
                     >
                       {flexRender(

packages/compass-indexes/src/components/regular-indexes-table/regular-index-actions.tsx

@@ -1,7 +1,12 @@
 import semver from 'semver';
 import React, { useCallback, useMemo } from 'react';
 import type { GroupedItemAction } from '@mongodb-js/compass-components';
-import { ItemActionGroup } from '@mongodb-js/compass-components';
+import { css, ItemActionGroup } from '@mongodb-js/compass-components';
+
+const styles = css({
+  // Align actions with the end of the table
+  justifyContent: 'flex-end',
+});
 
 type Index = {
   name: string;
@@ -83,9 +88,10 @@ const IndexActions: React.FunctionComponent<IndexActionsProps> = ({
   return (
     <ItemActionGroup<IndexAction>
       data-testid="index-actions"
+      className={styles}
       actions={indexActions}
       onAction={onAction}
-    ></ItemActionGroup>
+    />
   );
 };