From 2c99d415920919347f36008b73390b4917e1f17c Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 24 Jul 2025 11:42:04 -0700
Subject: [PATCH 1/2] improvement: adjust select dropdown styling in add
 project modal

---
 frontend/src/components/projects/NewProjectModal.tsx | 5 +++++
 frontend/src/components/v2/Select/Select.tsx         | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/components/projects/NewProjectModal.tsx b/frontend/src/components/projects/NewProjectModal.tsx
index 555b25b7e..fa3ae2c70 100644
--- a/frontend/src/components/projects/NewProjectModal.tsx
+++ b/frontend/src/components/projects/NewProjectModal.tsx
@@ -271,6 +271,8 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                     value={value}
                     onValueChange={onChange}
                     className="w-full"
+                    position="popper"
+                    dropdownContainerClassName="max-w-none"
                   >
                     {projectTemplates.length
                       ? projectTemplates.map((template) => (
@@ -306,6 +308,9 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
                         onChange(e);
                       }}
                       className="mb-12 w-full bg-mineshaft-600"
+                      position="popper"
+                      dropdownContainerClassName="max-w-none -top-1"
+                      side="top"
                     >
                       <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
                         Default Infisical KMS
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index f114c0f02..108ad5146 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -20,6 +20,7 @@ type Props = {
   isMulti?: boolean;
   iconClassName?: string;
   dropdownContainerStyle?: React.CSSProperties;
+  side: SelectPrimitive.SelectContentProps["side"];
 };
 
 export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
@@ -37,6 +38,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       containerClassName,
       iconClassName,
       dropdownContainerStyle,
+      side,
       ...props
     },
     ref
@@ -78,6 +80,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           </SelectPrimitive.Trigger>
           <SelectPrimitive.Portal>
             <SelectPrimitive.Content
+              side={side}
               className={twMerge(
                 "relative top-1 z-[100] max-w-sm overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
                 position === "popper" && "max-h-72",

From d9a57d1391fc3db8f0f63b8420652316682983d8 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 24 Jul 2025 11:50:05 -0700
Subject: [PATCH 2/2] fix: make side prop optional

---
 frontend/src/components/v2/Select/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
index 108ad5146..a232c0065 100644
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -20,7 +20,7 @@ type Props = {
   isMulti?: boolean;
   iconClassName?: string;
   dropdownContainerStyle?: React.CSSProperties;
-  side: SelectPrimitive.SelectContentProps["side"];
+  side?: SelectPrimitive.SelectContentProps["side"];
 };
 
 export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;