From edd5c8cd36bcde111c55498eff43be6d5f2cd372 Mon Sep 17 00:00:00 2001
From: matt <30363562+mmattbtw@users.noreply.github.com>
Date: Fri, 24 Jun 2022 08:01:25 -0500
Subject: [PATCH] feat: Allow Dropdown component to have alignment (#303)

* feat: Allow Dropdown component to have alignment

* fix: Align quick actions dropdown

* fix: content width of dropdown items

Co-authored-by: kaj <40004347+KAJdev@users.noreply.github.com>
Co-authored-by: kajdev <zekewotring@gmail.com>
---
 packages/interface/src/components/layout/TopBar.tsx | 1 +
 packages/ui/src/Dropdown.tsx                        | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/interface/src/components/layout/TopBar.tsx b/packages/interface/src/components/layout/TopBar.tsx
index 0dd0ec4e1..e0eed7088 100644
--- a/packages/interface/src/components/layout/TopBar.tsx
+++ b/packages/interface/src/components/layout/TopBar.tsx
@@ -117,6 +117,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 				<div className="flex mr-3 space-x-2">
 					<Dropdown
 						// className="absolute block h-6 w-44 top-2 right-4"
+						align="right"
 						items={[
 							[
 								{
diff --git a/packages/ui/src/Dropdown.tsx b/packages/ui/src/Dropdown.tsx
index bcd0ca593..a6320ae34 100644
--- a/packages/ui/src/Dropdown.tsx
+++ b/packages/ui/src/Dropdown.tsx
@@ -21,6 +21,7 @@ export interface DropdownProps {
 	className?: string;
 	itemsClassName?: string;
 	itemButtonClassName?: string;
+	align?: 'left' | 'right';
 }
 
 export const Dropdown: React.FC<DropdownProps> = (props) => {
@@ -49,8 +50,10 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
 
 				<Menu.Items
 					className={clsx(
-						'absolute z-50 min-w-[100px] w-full bg-white border divide-y divide-gray-100 rounded-md shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
-						props.itemsClassName
+						'absolute z-50 min-w-fit w-full bg-white border divide-y divide-gray-100 rounded shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none',
+						props.itemsClassName,
+						{ 'left-0': props.align === 'left' },
+						{ 'right-0': props.align === 'right' }
 					)}
 				>
 					{props.items.map((item, index) => (
@@ -61,7 +64,7 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
 										<button
 											onClick={button.onPress}
 											className={clsx(
-												'text-sm group flex rounded items-center w-full px-2 py-1 dark:hover:bg-gray-500',
+												'text-sm group flex grow shrink-0 rounded items-center w-full whitespace-nowrap px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
 												{
 													'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
 													// 'text-gray-900 dark:text-gray-200': !active