improvement: adjust select dropdown styling in add project modal

This commit is contained in:
Scott Wilson
2025-07-24 11:42:04 -07:00
parent 2535d1bc4b
commit 2c99d41592
2 changed files with 8 additions and 0 deletions
@@ -271,6 +271,8 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
value={value} value={value}
onValueChange={onChange} onValueChange={onChange}
className="w-full" className="w-full"
position="popper"
dropdownContainerClassName="max-w-none"
> >
{projectTemplates.length {projectTemplates.length
? projectTemplates.map((template) => ( ? projectTemplates.map((template) => (
@@ -306,6 +308,9 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
onChange(e); onChange(e);
}} }}
className="mb-12 w-full bg-mineshaft-600" 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"> <SelectItem value={INTERNAL_KMS_KEY_ID} key="kms-internal">
Default Infisical KMS Default Infisical KMS
@@ -20,6 +20,7 @@ type Props = {
isMulti?: boolean; isMulti?: boolean;
iconClassName?: string; iconClassName?: string;
dropdownContainerStyle?: React.CSSProperties; dropdownContainerStyle?: React.CSSProperties;
side: SelectPrimitive.SelectContentProps["side"];
}; };
export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props; export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
@@ -37,6 +38,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
containerClassName, containerClassName,
iconClassName, iconClassName,
dropdownContainerStyle, dropdownContainerStyle,
side,
...props ...props
}, },
ref ref
@@ -78,6 +80,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
side={side}
className={twMerge( 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", "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", position === "popper" && "max-h-72",