update the recommended product squares on the product page to match the product square on the search page

app/product/[handle]/page.tsx

@@ -108,14 +108,16 @@ async function RelatedProducts({ id }: { id: string }) {
       <Grid className="grid-cols-2 lg:grid-cols-5">
         {relatedProducts.map((product) => {
           return (
-            <Grid.Item key={product.id} className="animate-fadeIn">
-              <Link
-                aria-label={product.title}
-                className="border-gay-300 group relative block aspect-square overflow-hidden border bg-gray-50"
-                href={`/product/${product.handle}`}
-              >
+            <Grid.Item key={product.handle} className="animate-fadeIn">
+              <Link className="h-full w-full" href={`/product/${product.handle}`}>
                 <GridTileImage
                   alt={product.title}
+                  labels={{
+                    isSmall: true,
+                    title: product.title,
+                    amount: product.priceRange.maxVariantPrice.amount,
+                    currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                  }}
                   src={product.featuredImage.url}
                   width={600}
                   height={600}

components/cart/button.tsx

@@ -54,7 +54,7 @@ export default function CartButton({
         onClick={() => {
           setCartIsOpen(true);
         }}
-        className="relative top-0 right-0"
+        className="relative right-0 top-0"
         data-testid="open-cart"
       >
         <CartIcon quantity={cart.totalQuantity} />

components/grid/tile.tsx

@@ -48,7 +48,7 @@ export function GridTileImage({
         />
       ) : null}
       {labels ? (
-        <div className="absolute top-0 left-0 w-3/4 text-black dark:text-white">
+        <div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
           <h3
             data-testid="product-name"
             className={clsx(

components/layout/footer.tsx

@@ -44,7 +44,7 @@ export default async function Footer() {
             </a>
           </div>
         </div>
-        <div className="flex flex-col items-center justify-between space-y-4 pt-6 pb-10 text-sm md:flex-row">
+        <div className="flex flex-col items-center justify-between space-y-4 pb-10 pt-6 text-sm md:flex-row">
           <p>&copy; 2023 {SITE_NAME}. All rights reserved.</p>
           <div className="flex items-center text-sm text-white dark:text-black">
             <span className="text-black dark:text-white">Created by</span>

components/layout/navbar/search.tsx

@@ -32,9 +32,9 @@ export default function Search() {
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="w-full py-2 px-4 text-black dark:bg-black dark:text-gray-100"
+        className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
       />
-      <div className="absolute top-0 right-0 mr-3 flex h-full items-center">
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <SearchIcon className="h-5" />
       </div>
     </form>