From 7581b51e0da4b0d1bcc72cecfeba31cfdfe4775a Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Thu, 27 Jul 2023 13:11:43 +0100
Subject: [PATCH] fix: table dropdown button element and alignment

---
 .../trading-dropdown/actions-dropdown.tsx     | 10 ++++--
 .../trading-dropdown/trading-dropdown.tsx     | 32 +++++++++++--------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx b/libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx
index 16542d344..6795c1b4e 100644
--- a/libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx
+++ b/libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx
@@ -11,7 +11,9 @@ export const ActionsDropdownTrigger = () => {
       className='hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 [&[aria-expanded="true"]]:bg-vega-light-200 dark:[&[aria-expanded="true"]]:bg-vega-dark-200 p-0.5 rounded-full'
       data-testid="dropdown-menu"
     >
-      <VegaIcon name={VegaIconNames.KEBAB} />
+      <button>
+        <VegaIcon name={VegaIconNames.KEBAB} />
+      </button>
     </TradingDropdownTrigger>
   );
 };
@@ -22,7 +24,11 @@ type ActionMenuContentProps = React.ComponentProps<
 export const ActionsDropdown = (props: ActionMenuContentProps) => {
   return (
     <TradingDropdown trigger={<ActionsDropdownTrigger />}>
-      <TradingDropdownContent {...props}></TradingDropdownContent>
+      <TradingDropdownContent
+        {...props}
+        side="bottom"
+        align="end"
+      ></TradingDropdownContent>
     </TradingDropdown>
   );
 };
diff --git a/libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx b/libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx
index c0fbcf146..8d35d3590 100644
--- a/libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx
+++ b/libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx
@@ -67,19 +67,25 @@ export const TradingDropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
 export const TradingDropdownContent = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentProps<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 10, ...contentProps }, forwardedRef) => (
-  <DropdownMenuPrimitive.Content
-    ref={forwardedRef}
-    className={classNames(
-      'min-w-[290px] bg-vega-clight-700 dark:bg-vega-cdark-700',
-      'border border-vega-clight-500 dark:border-vega-cdark-500',
-      'p-2 rounded z-20 text-default'
-    )}
-    align="start"
-    sideOffset={sideOffset}
-    {...contentProps}
-  />
-));
+>(
+  (
+    { className, align = 'start', side, sideOffset = 10, ...contentProps },
+    forwardedRef
+  ) => (
+    <DropdownMenuPrimitive.Content
+      ref={forwardedRef}
+      className={classNames(
+        'min-w-[290px] bg-vega-clight-700 dark:bg-vega-cdark-700',
+        'border border-vega-clight-500 dark:border-vega-cdark-500',
+        'p-2 rounded z-20 text-default'
+      )}
+      align={align}
+      sideOffset={sideOffset}
+      side={side}
+      {...contentProps}
+    />
+  )
+);
 TradingDropdownContent.displayName = 'DropdownMenuContent';
 
 /**