fix(web): SearchBoxWithPillSuggestions example

Author: mohdashraf010897

packages/web/examples/SearchBoxWithPillSuggestions/src/index.css

@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -152,6 +152,7 @@ body {
 	display: flex;
 	gap: 10px;
 	overflow: auto;
+	margin-top: 10px;
 }
 .pill-wrapper::-webkit-scrollbar {
 	height: 0px;

packages/web/examples/SearchBoxWithPillSuggestions/src/index.js

@@ -20,7 +20,7 @@ const Main = () => {
 			<div className="row">
 				<div className="col">
 					<SearchBox
-						title="SearchBox"
+						title="SearchBox with pill suggestions"
 						defaultValue={'Free Guy'}
 						dataField={['original_title', 'original_title.search']}
 						componentId="MoviesSensor"
@@ -34,7 +34,7 @@ const Main = () => {
 							error,
 							data,
 							value,
-							downshiftProps: { isOpen, getItemProps },
+							downshiftProps: { getItemProps },
 						}) => {
 							if (loading) {
 								return <div>Fetching Suggestions.</div>;
@@ -46,7 +46,7 @@ const Main = () => {
 									</div>
 								);
 							}
-							return isOpen && Boolean(value.length) ? (
+							return Boolean(value.length) ? (
 								<div className="pill-wrapper">
 									{data.map((suggestion, index) => (
 										<button
@@ -63,9 +63,7 @@ const Main = () => {
 							) : null;
 						}}
 					/>
-				</div>
-
-				<div className="col">
+					<br />
 					<ReactiveList
 						componentId="SearchResult"
 						dataField="original_title"