fix: Fix display issues for the provider/model select menus (#1949)

ui/desktop/src/components/Modal.tsx

@@ -24,7 +24,12 @@ export default function Modal({
   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (preventBackdropClose) return;
     // Check if the click was on the backdrop and not on the modal content
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+    // Also check if the click target is not part of a Select menu
+    if (
+      modalRef.current &&
+      !modalRef.current.contains(e.target as Node) &&
+      !(e.target as HTMLElement).closest('.select__menu')
+    ) {
       onClose();
     }
   };
@@ -33,7 +38,11 @@ export default function Modal({
   useEffect(() => {
     const handleEscKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        onClose();
+        // Don't close if a select menu is open
+        const selectMenu = document.querySelector('.select__menu');
+        if (!selectMenu) {
+          onClose();
+        }
       }
     };
 
@@ -53,7 +62,7 @@ export default function Modal({
     >
       <Card
         ref={modalRef}
-        className="relative w-[500px] max-w-full bg-bgApp rounded-xl my-10  max-h-[90vh] flex flex-col"
+        className="relative w-[500px] max-w-full bg-bgApp rounded-xl my-10 max-h-[90vh] flex flex-col"
       >
         <div className="p-8 max-h-[calc(90vh-180px)] overflow-y-auto">{children}</div>
         {footer && (

ui/desktop/src/components/settings_v2/models/subcomponents/AddModelModal.tsx

@@ -117,7 +117,6 @@ export const AddModelModal = ({ onClose, setView }: AddModelModalProps) => {
         activeProviders.forEach(({ metadata, name }) => {
           if (metadata.known_models && metadata.known_models.length > 0) {
             formattedModelOptions.push({
-              label: metadata.display_name,
               options: metadata.known_models.map((modelName) => ({
                 value: modelName,
                 label: modelName,

ui/desktop/src/components/ui/Select.tsx

@@ -7,14 +7,23 @@ export const Select = (props) => {
       {...props}
       unstyled
       classNames={{
-        container: () => 'w-full cursor-pointer',
+        container: () => 'w-full cursor-pointer relative z-[99999]',
         indicatorSeparator: () => 'h-0',
         control: ({ isFocused }) =>
           `border-2 ${isFocused ? 'border-borderStandard' : 'border-borderSubtle'} focus:border-borderStandard hover:border-borderStandard rounded-md w-full px-4 py-2.5 text-sm text-textSubtle`,
-        menu: () => 'mt-3 bg-bgStandard shadow-xl rounded-md text-textSubtle overflow-hidden',
+        menu: () =>
+          'mt-3 bg-bgStandard shadow-xl rounded-md text-textSubtle overflow-hidden relative z-[99999] select__menu',
+        menuPortal: () => 'z-[99999] select__menu',
         option: () =>
           'py-4 px-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 text-textProminent font-medium',
       }}
+      menuPortalTarget={document.body}
+      styles={{
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: 99999,
+        }),
+      }}
     />
   );
 };