delete false files and fix multiselect

web-app/client/src/components/Inputs/MultiSelect/MultiSelect.module.scss

@@ -23,9 +23,7 @@
   &.disabled {
     opacity: 0.5;
   }
-}
 
-.multiSelect {
   .control {
     display: flex;
     justify-content: space-between;
@@ -114,47 +112,38 @@
   .indicatorsContainer {
     margin: 0;
   }
+}
 
-  .option {
-    @include paragraph;
-    padding: 16px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-
-    .optionText {
-      // min-width: 50%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &.once {
-      justify-content: space-between;
-    }
-
-    &.focused {
-      background: $primary-02;
-    }
+.option {
+  @include paragraph;
+  padding: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
 
-    &.selected {
-      background: $primary-10;
-    }
+  .optionText {
+    // min-width: 50%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .noOptionsMessage {
-    color: $black-50;
-    text-align: center;
+  &.once {
+    justify-content: space-between;
   }
 
-  p.error {
-    @include paragraph-small;
-    margin: 8px 0 0;
-    color: $error;
+  &.focused {
+    background: $primary-02;
   }
 
-  &.disabled {
-    opacity: 0.5;
+  &.selected {
+    background: $primary-10;
   }
 }
+
+.noOptionsMessage {
+  color: $black-50;
+  display: block;
+  text-align: center;
+}

web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx

@@ -4,6 +4,8 @@ import {
   forwardRef,
   ForwardRefRenderFunction,
   ReactNode,
+  useEffect,
+  useState,
 } from 'react';
 import ReactSelect, { Props as ReactSelectProps } from 'react-select';
 import { InputPropsBase } from '@components/Inputs';
@@ -25,6 +27,11 @@ const MultiSelect: ForwardRefRenderFunction<RefElement, MultiSelectProps> = (
   { label, error, tooltip, className, id, components, ...props },
   ref,
 ) => {
+  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPortalNode(document.getElementById('portals-container-node'));
+  }, []);
   return (
     <div
       className={cn(
@@ -46,8 +53,15 @@ const MultiSelect: ForwardRefRenderFunction<RefElement, MultiSelectProps> = (
         className={cn(styles.multiSelect, error && styles.error)}
         {...props}
         ref={ref}
+        styles={{
+          menuPortal: (base) => {
+            return { ...base, zIndex: 9999999 };
+          },
+          ...colorStyles,
+        }}
+        menuPortalTarget={portalNode}
         components={{ ...customComponents, ...components }}
-        styles={colorStyles}
+        // styles={colorStyles}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         error={error}

web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx

@@ -21,6 +21,7 @@ import {
 import { OptionWithBadges } from 'types/multiSelect';
 import { OptionBadge } from './OptionBadge';
 import styles from './MultiSelect.module.scss';
+import { Option as OptionType } from 'types/inputs';
 
 export const colorStyles: StylesConfig = {
   control: (style) => ({}),

web-app/client/src/components/Inputs/Select/Select.module.scss

@@ -73,11 +73,6 @@
     opacity: 0.5;
   }
 
-  .noOptionsMessage {
-    color: $black-50;
-    text-align: center;
-  }
-
   p.error {
     @include paragraph-small;
     margin: 8px 0 0;
@@ -89,6 +84,11 @@
   }
 }
 
+.noOptionsMessage {
+  color: $black-50;
+  text-align: center;
+}
+
 .option {
   @include paragraph;
   padding: 16px;

web-app/client/src/components/Inputs/Select/customComponents.tsx

@@ -74,14 +74,6 @@ const IndicatorsContainer: ComponentType<
   </div>
 );
 
-const Menu: ComponentType<MenuProps<OptionType, false> & InputPropsBase> = (
-  innerProps,
-) => (
-    <FloatingPortal>
-      <components.Menu {...innerProps}></components.Menu>
-    </FloatingPortal>
-  );
-
 export const Option: ComponentType<
   OptionProps<OptionType, false> & InputPropsBase
 > = ({ innerProps, innerRef, children, isFocused, isSelected }) => (