From 6e9de3d2a24f3e47b875389efefe75ba738bb3af Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 11 Aug 2023 12:21:11 +0300
Subject: [PATCH 1/2] TAL-45 - add message when there are no results in talent
 search

---
 .../src/routes/search-results-page/SearchResultsPage.tsx      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
index 401e3308a..76d7d8424 100644
--- a/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
+++ b/src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
@@ -76,6 +76,10 @@ const SearchResultsPage: FC = () => {
                         <span>
                             Search thousands of skills to match with our global experts.
                         </span>
+                    ) : !total ? (
+                        <span>
+                            Reach out to Topcoder to find the right member for you.
+                        </span>
                     ) : (
                         <>
                             {skillsModalTriggerBtn}

From 2f08326ee97a33f0c72ec27b33938fe8a5df4dd1 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 11 Aug 2023 12:42:55 +0300
Subject: [PATCH 2/2] TAL-47 - fix search input & responsiveness

---
 .../content-layout/ContentLayout.module.scss  |  4 ++++
 .../InputMultiselect.module.scss              | 13 +++-------
 .../input-multiselect/InputMultiselect.tsx    | 24 +++++++++----------
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/libs/ui/lib/components/content-layout/ContentLayout.module.scss b/src/libs/ui/lib/components/content-layout/ContentLayout.module.scss
index ddce9bb0e..81b5908d8 100644
--- a/src/libs/ui/lib/components/content-layout/ContentLayout.module.scss
+++ b/src/libs/ui/lib/components/content-layout/ContentLayout.module.scss
@@ -19,6 +19,10 @@
             display: flex;
             flex-direction: column;
 
+            @include ltesm {
+                max-width: 100%;
+            }
+
             .page-header {
                 display: flex;
                 align-items: center;
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
index 8737f0c91..61c380268 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss
@@ -24,13 +24,6 @@
     }
 }
 
-.additionalPlaceholder {
-    color: $black-60;
-    width: 0;
-    pointer-events: none;
-    white-space: nowrap;
-}
-
 .multiselect .ms {
     display: block;
 
@@ -88,6 +81,9 @@
         padding: 0;
         visibility: visible;
         order: 999;
+        > input {
+            min-width: 72px!important;
+        }
     }
 
     &:global(__multi-value) {
@@ -175,9 +171,6 @@
             color: $tc-white;
         }
     }
-    &:global(__input-container):focus-within + .additionalPlaceholder {
-        display: none;
-    }
 }
 
 .theme-clear.multiselect .ms {
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
index cbf20acb5..060c7005b 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx
@@ -64,6 +64,16 @@ const MultiValueRemove: FC = (props: any) => (
     </components.MultiValueRemove>
 )
 
+const Input: FC = (props: any) => {
+    const placeholder = props.hasValue && props.selectProps.isSearchable
+        ? props.selectProps.placeholder
+        : ''
+
+    return (
+        <components.Input {...props} placeholder={placeholder} />
+    )
+}
+
 // eslint-disable-next-line react/function-component-definition
 const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => (
     <components.DropdownIndicator {...props}>
@@ -71,18 +81,6 @@ const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => (
     </components.DropdownIndicator>
 )
 
-// eslint-disable-next-line react/function-component-definition
-const ValueContainer = (props: any): JSX.Element => (
-    <components.ValueContainer {...props}>
-        {props.children}
-        {props.hasValue && props.selectProps.isSearchable && (
-            <span className={classNames('body-small', styles.additionalPlaceholder)}>
-                {props.selectProps.placeholder}
-            </span>
-        )}
-    </components.ValueContainer>
-)
-
 const InputMultiselect: FC<InputMultiselectProps> = props => {
     const asynSelectRef = useRef<any>()
     const placeholder = useMemo(() => (
@@ -149,8 +147,8 @@ const InputMultiselect: FC<InputMultiselectProps> = props => {
             isSearchable={isSearchable}
             components={{
                 DropdownIndicator: dropdownIndicator(props.dropdownIcon),
+                Input,
                 MultiValueRemove,
-                ValueContainer,
             }}
             value={props.value}
             openMenuOnClick={false}