Merge pull request #11 from coinbase/alissa.crane/qa-4

chore: shrink site
coinbase · Oct 18, 2024 · 806d875 · 806d875
2 parents 0af629c + 98e5042
commit 806d875
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx
@@ -11,7 +11,7 @@ export default function OnchainStore() {
       <div className="flex h-full max-h-screen max-w-full flex-col font-sansMono">
         <Banner />
         <Navbar />
-        <main className="mx-auto flex max-w-5xl grow flex-col pt-[5.75rem] pb-10">
+        <main className="mx-auto flex max-w-5xl grow flex-col pt-[5.5rem] pb-10">
           <div className="flex grow flex-col pb-10 md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />

diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx
@@ -46,7 +46,7 @@ export default function OnchainStoreCart() {
     <div className="-mx-[50vw] fixed right-1/2 bottom-0 left-1/2 w-screen border-gray-200 border-t bg-[white]">
       <div className="mx-auto max-w-5xl ">
         <div className="flex flex-col items-start justify-between py-4 md:flex-row md:items-center">
-          <span className="mb-2 hidden px-4 text-xs sm:flex md:mb-0 md:w-1/3 lg:px-8">
+          <span className="mb-2 hidden px-4 text-xs sm:flex md:mb-0 md:w-1/3 lg:px-6">
             Built with OnchainKit
           </span>
           <div className="flex w-full grow flex-col items-center justify-between gap-2 px-4 sm:flex-row sm:gap-0 md:w-auto lg:px-6">

diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx
@@ -8,13 +8,13 @@ export default function OnchainStoreItem({ id, name, price, image }: Product) {
       <div className="mb-1 flex items-start justify-between">
         <h2 className="font-regular text-xs">{name}</h2>
       </div>
-      <Image
-        src={image}
-        alt="123"
-        width={280}
-        height={280}
-        className="mx-auto"
-      />
+      <div className="flex grow justify-center md:relative">
+        <Image
+          src={image}
+          alt="123"
+          className="mx-auto object-contain max-sm:max-w-[300px] md:absolute md:h-full md:w-auto"
+        />
+      </div>
       <div className="flex items-center justify-between">
         <p className="font-regular text-xs">{price.toFixed(2)} USDC</p>
         <QuantityInput productId={id} />

diff --git a/src/components/OnchainStoreItems.tsx b/src/components/OnchainStoreItems.tsx
@@ -6,7 +6,7 @@ export default function OnchainStoreItems() {
 
   return (
     <div className=" scroll mb-16 grow md:mb-0 ">
-      <div className="grid grid-cols-1 sm:grid-cols-2">
+      <div className="grid h-full grid-cols-1 grid-rows-2 sm:grid-cols-2">
         {products?.map((item) => (
           <OnchainStoreItem {...item} key={item.id} />
         ))}