From 27b5debd663a754b8c46c49c89df42a563a5a330 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <hsiaowinston@gmail.com>
Date: Sat, 16 Nov 2024 21:45:46 -0800
Subject: [PATCH] Adjust listing and browse UI

---
 .../components/listing/ListingRenderer.tsx    | 24 +++++++++----------
 .../components/listings/ListingGridCard.tsx   |  2 +-
 frontend/src/components/pages/Browse.tsx      |  2 +-
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/listing/ListingRenderer.tsx b/frontend/src/components/listing/ListingRenderer.tsx
index c8228b49..0a29fbe8 100644
--- a/frontend/src/components/listing/ListingRenderer.tsx
+++ b/frontend/src/components/listing/ListingRenderer.tsx
@@ -121,22 +121,20 @@ const ListingRenderer = ({ listing }: { listing: ListingResponse }) => {
           <hr className="border-gray-200 my-4" />
 
           {/* Build this robot */}
-          <div className="flex flex-col sm:flex-row sm:items-baseline gap-4">
-            <div className="grid grid-cols-1 xs:grid-cols-3 gap-4 w-full">
-              <ListingRegisterRobot listingId={listingId} className="w-full" />
-              <ListingFeatureButton
+          <div className="flex flex-col gap-4">
+            <ListingRegisterRobot listingId={listingId} className="w-full" />
+            <ListingFeatureButton
+              listingId={listingId}
+              initialFeatured={isFeatured}
+              className="w-full"
+            />
+            {canEdit && (
+              <ListingDeleteButton
                 listingId={listingId}
-                initialFeatured={isFeatured}
                 className="w-full"
+                initialFeatured={isFeatured}
               />
-              {canEdit && (
-                <ListingDeleteButton
-                  listingId={listingId}
-                  className="w-full"
-                  initialFeatured={isFeatured}
-                />
-              )}
-            </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/listings/ListingGridCard.tsx b/frontend/src/components/listings/ListingGridCard.tsx
index 312d85b3..0a1cab36 100644
--- a/frontend/src/components/listings/ListingGridCard.tsx
+++ b/frontend/src/components/listings/ListingGridCard.tsx
@@ -24,7 +24,7 @@ const ListingGridCard = ({
   };
 
   return (
-    <div className="bg-black rounded-lg shadow-md overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 h-auto flex flex-col">
+    <div className="bg-black rounded-xl shadow-md overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 h-auto flex flex-col">
       <div className="relative pb-[100%]">
         {listing?.artifacts[0]?.artifact_type === "image" &&
         listing?.artifacts[0]?.urls.small ? (
diff --git a/frontend/src/components/pages/Browse.tsx b/frontend/src/components/pages/Browse.tsx
index 64795944..fff2f780 100644
--- a/frontend/src/components/pages/Browse.tsx
+++ b/frontend/src/components/pages/Browse.tsx
@@ -116,7 +116,7 @@ const Browse = () => {
 
   return (
     <Container className="min-h-screen">
-      <div className="">
+      <div className="mb-10">
         <div className="flex flex-col justify-center mb-6 text-center max-w-5xl mx-auto">
           <h1 className="text-2xl font-bold mb-2">Community Robots Hub</h1>
           <p className="text-gray-2 text-xs sm:text-lg">