fix: issue export project select dropdown width and truncate fix (#5138)

This commit is contained in:
Anmol Singh Bhatia 2024-07-16 15:58:55 +05:30 committed by GitHub
parent f2733ab4df
commit d042dac042
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -44,8 +44,8 @@ export const Exporter: React.FC<Props> = observer((props) => {
query: `${projectDetails?.name} ${projectDetails?.identifier}`, query: `${projectDetails?.name} ${projectDetails?.identifier}`,
content: ( content: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span> <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
{projectDetails?.name} <span className="truncate">{projectDetails?.name}</span>
</div> </div>
), ),
}; };
@ -111,7 +111,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -121,7 +121,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-xl">
<div className="flex flex-col gap-6 gap-y-4 p-6"> <div className="flex flex-col gap-6 gap-y-4 p-6">
<div className="flex w-full items-center justify-start gap-6"> <div className="flex w-full items-center justify-start gap-6">
<span className="flex items-center justify-start"> <span className="flex items-center justify-start">
@ -150,7 +150,8 @@ export const Exporter: React.FC<Props> = observer((props) => {
} }
onOpen={() => setIsSelectOpen(true)} onOpen={() => setIsSelectOpen(true)}
onClose={() => setIsSelectOpen(false)} onClose={() => setIsSelectOpen(false)}
optionsClassName="min-w-full" optionsClassName="max-w-48 sm:max-w-[532px]"
placement="bottom-end"
multiple multiple
/> />
</div> </div>