Adjust listing and browse UI

kscalelabs · Nov 17, 2024 · 27b5deb · 27b5deb
1 parent a500274
commit 27b5deb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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">