From eef38a554fe0ad0ac7b1aeb28e4f6ba57984708c Mon Sep 17 00:00:00 2001
From: Ashley <saturn226@github.com>
Date: Tue, 19 Nov 2024 14:07:12 -0500
Subject: [PATCH] updated search bar for copilot landing page  (#53180)

---
 src/landings/components/CategoryLanding.tsx   |  8 ++++----
 .../components/CookBookArticleCard.tsx        |  6 +++---
 src/landings/components/CookBookFilter.tsx    | 20 ++++++++-----------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/landings/components/CategoryLanding.tsx b/src/landings/components/CategoryLanding.tsx
index 07e294ed6d..21522a196d 100644
--- a/src/landings/components/CategoryLanding.tsx
+++ b/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>
diff --git a/src/landings/components/CookBookArticleCard.tsx b/src/landings/components/CookBookArticleCard.tsx
index 6e6e67e4ec..7a1ea99fc6 100644
--- a/src/landings/components/CookBookArticleCard.tsx
+++ b/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) => (
diff --git a/src/landings/components/CookBookFilter.tsx b/src/landings/components/CookBookFilter.tsx
index 160a11f3a6..50f40184cc 100644
--- a/src/landings/components/CookBookFilter.tsx
+++ b/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>
   )
 }