From 835972277c5e929f4ce6537585e6ca73e5feed8e Mon Sep 17 00:00:00 2001
From: MaxKless <34165455+MaxKless@users.noreply.github.com>
Date: Thu, 20 Jul 2023 20:46:11 +0200
Subject: [PATCH] fix(graph): increase dropdown indicator padding (#18146)

---
 graph/client/tailwind.config.js          | 7 ++++++-
 graph/ui-components/src/lib/dropdown.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/graph/client/tailwind.config.js b/graph/client/tailwind.config.js
index a130bfceccd48..18a8d985ec32a 100644
--- a/graph/client/tailwind.config.js
+++ b/graph/client/tailwind.config.js
@@ -36,5 +36,10 @@ module.exports = {
       translate: ['group-hover'],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
 };
diff --git a/graph/ui-components/src/lib/dropdown.tsx b/graph/ui-components/src/lib/dropdown.tsx
index 19d0e6fef065d..f7a1d8323dabe 100644
--- a/graph/ui-components/src/lib/dropdown.tsx
+++ b/graph/ui-components/src/lib/dropdown.tsx
@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`flex items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
+      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
       {...rest}
     >
       {children}