updated search bar for copilot landing page (#53180)

src/landings/components/CategoryLanding.tsx

@@ -86,14 +86,14 @@ export const CategoryLanding = () => {
 
         <h2 className="py-5">Spotlight</h2>
         <div className="d-md-flex d-sm-block">
-          <CookBookArticleCard image="DeleteMe" spotlight={true} />
-          <CookBookArticleCard image="DeleteMe" spotlight={true} />
-          <CookBookArticleCard image="DeleteMe" spotlight={true} />
+          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
+          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
+          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
         </div>
 
         <div className="pt-8">
           <div className="py-5 border-bottom">
-            <div className="col-lg-4 col-sm-12 float-md-left pb-3 mr-5 ml-1">
+            <div className="pb-3 mr-5 ml-1 float-xl-left">
               <h2>Explore {searchResults.length} prompt articles</h2>
             </div>
             <div>

src/landings/components/CookBookArticleCard.tsx

@@ -96,9 +96,9 @@ export const CookBookArticleCard = ({
               />
             )}
         <div>
-          <Link href={url}>
-            <h3 className="h4">{title}</h3>
-          </Link>
+          <h3 className="h4">
+            <Link href={url}>{title}</Link>
+          </h3>
           <div className="fgColor-muted mb-3 mt-2">{description}</div>
           <LabelGroup>
             {tags.map((tag, index) => (

src/landings/components/CookBookFilter.tsx

@@ -54,13 +54,13 @@ export const CookBookFilter = ({
   }, [isSearchOpen])
 
   return (
-    <>
-      <div>
+    <div className="d-lg-flex d-sm-block">
+      <div className="col-12 mr-2">
         <form onSubmit={(e) => e.preventDefault()}>
           <TextInput
             leadingVisual={SearchIcon}
-            className="float-lg-left m-1"
-            sx={{ minWidth: ['stretch', 'stretch', 'stretch', 250] }}
+            className="m-1"
+            sx={{ minWidth: ['stretch', 'stretch', 'stretch', 'stretch'] }}
             placeholder="Search articles"
             ref={inputRef}
             autoComplete="false"
@@ -73,7 +73,7 @@ export const CookBookFilter = ({
       </div>
       <div className="d-flex">
         <ActionMenu>
-          <ActionMenu.Button className="col-md-1 col-sm-2 float-md-left m-1">
+          <ActionMenu.Button className="col-md-1 col-sm-2 m-1">
             <Box
               sx={{
                 color: 'fg.muted',
@@ -100,7 +100,7 @@ export const CookBookFilter = ({
         </ActionMenu>
 
         <ActionMenu>
-          <ActionMenu.Button className="col-md-1 col-sm-2 float-md-left m-1">
+          <ActionMenu.Button className="col-md-1 col-sm-2 m-1">
             <Box
               sx={{
                 color: 'fg.muted',
@@ -126,14 +126,10 @@ export const CookBookFilter = ({
           </ActionMenu.Overlay>
         </ActionMenu>
 
-        <Button
-          variant="invisible"
-          className="col-md-1 col-sm-2 float-left mt-1"
-          onClick={onResetFilter}
-        >
+        <Button variant="invisible" className="col-md-1 col-sm-2 mt-1" onClick={onResetFilter}>
           Reset filters
         </Button>
       </div>
-    </>
+    </div>
   )
 }