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 = () => {
Search thousands of skills to match with our global experts.
+ ) : !total ? (
+
+ Reach out to Topcoder to find the right member for you.
+
) : (
<>
{skillsModalTriggerBtn}
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) => (
)
+const Input: FC = (props: any) => {
+ const placeholder = props.hasValue && props.selectProps.isSearchable
+ ? props.selectProps.placeholder
+ : ''
+
+ return (
+
+ )
+}
+
// eslint-disable-next-line react/function-component-definition
const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => (
@@ -71,18 +81,6 @@ const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => (
)
-// eslint-disable-next-line react/function-component-definition
-const ValueContainer = (props: any): JSX.Element => (
-
- {props.children}
- {props.hasValue && props.selectProps.isSearchable && (
-
- {props.selectProps.placeholder}
-
- )}
-
-)
-
const InputMultiselect: FC = props => {
const asynSelectRef = useRef()
const placeholder = useMemo(() => (
@@ -149,8 +147,8 @@ const InputMultiselect: FC = props => {
isSearchable={isSearchable}
components={{
DropdownIndicator: dropdownIndicator(props.dropdownIcon),
+ Input,
MultiValueRemove,
- ValueContainer,
}}
value={props.value}
openMenuOnClick={false}