From 986620e9ef524e8b96e4f74ca2cd963288edb481 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <jp@calltheguys.co>
Date: Thu, 30 Nov 2023 10:04:02 -0800
Subject: [PATCH] Various fixes

---
 app/root.tsx                       | 3 +++
 app/routes/_index.tsx              | 4 ++--
 app/routes/collections.$handle.tsx | 2 +-
 app/routes/collections._index.tsx  | 2 +-
 app/routes/products.$handle.tsx    | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/app/root.tsx b/app/root.tsx
index 8b7df2b..8f655ff 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -119,6 +119,7 @@ export default function App() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        {/* Include css-hook styles */}
         <style id="css-hooks" dangerouslySetInnerHTML={{__html: css}} />
       </head>
       <body
@@ -158,6 +159,8 @@ export function ErrorBoundary() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        {/* Include css-hook styles */}
+        <style id="css-hooks" dangerouslySetInnerHTML={{__html: css}} />
       </head>
       <body>
         <Layout {...rootData}>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 0e44258..5b4ece6 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -97,10 +97,10 @@ function RecommendedProducts({
                 <Link key={product.id} to={`/products/${product.handle}`}>
                   <Image
                     data={product.images.nodes[0]}
-                    aspectRatio="1/1"
+                    aspectRatio="800/450"
                     sizes="(min-width: 45em) 20vw, 50vw"
                     style={hooks({
-                      height: '100%',
+                      height: 'auto',
                     })}
                   />
                   <h4>{product.title}</h4>
diff --git a/app/routes/collections.$handle.tsx b/app/routes/collections.$handle.tsx
index f643235..49003a0 100644
--- a/app/routes/collections.$handle.tsx
+++ b/app/routes/collections.$handle.tsx
@@ -110,7 +110,7 @@ function ProductItem({
       {product.featuredImage && (
         <Image
           alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
+          aspectRatio="800/450"
           data={product.featuredImage}
           loading={loading}
           sizes="(min-width: 45em) 400px, 100vw"
diff --git a/app/routes/collections._index.tsx b/app/routes/collections._index.tsx
index 446e6d4..5403305 100644
--- a/app/routes/collections._index.tsx
+++ b/app/routes/collections._index.tsx
@@ -77,7 +77,7 @@ function CollectionItem({
       {collection?.image && (
         <Image
           alt={collection.image.altText || collection.title}
-          aspectRatio="1/1"
+          aspectRatio="800/450"
           data={collection.image}
           loading={index < 3 ? 'eager' : undefined}
           style={hooks({height: 'auto'})}
diff --git a/app/routes/products.$handle.tsx b/app/routes/products.$handle.tsx
index cd71b9c..cf42f94 100644
--- a/app/routes/products.$handle.tsx
+++ b/app/routes/products.$handle.tsx
@@ -145,7 +145,7 @@ function ProductImage({image}: {image: ProductVariantFragment['image']}) {
     <div>
       <Image
         alt={image.altText || 'Product Image'}
-        aspectRatio="1/1"
+        aspectRatio="800/450"
         data={image}
         key={image.id}
         sizes="(min-width: 45em) 50vw, 100vw"
