From 7023b470e65d8728371529df244bb91df87fc62a Mon Sep 17 00:00:00 2001
From: Yifan Mai <yifan@cs.stanford.edu>
Date: Wed, 30 Oct 2024 13:53:13 -0700
Subject: [PATCH] Fix padding around mini leaderboard for Classic and Lite
 (#3114)

---
 helm-frontend/src/components/Hero.tsx | 29 +++++++++------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/helm-frontend/src/components/Hero.tsx b/helm-frontend/src/components/Hero.tsx
index b6f9bcfa11..3587d356f5 100644
--- a/helm-frontend/src/components/Hero.tsx
+++ b/helm-frontend/src/components/Hero.tsx
@@ -15,34 +15,25 @@ export default function Hero() {
       </div>
 
       {/* Container for Image and Leaderboard */}
-      <div
-        className="flex flex-col md:flex-col lg:flex-row lg:justify-center"
-        style={{ height: "525px", transform: "scale(0.9)" }} // Reduced height by 10%
-      >
+      <div className="flex flex-col md:flex-col lg:flex-row lg:justify-center">
         {/* Image section */}
         <div className="w-full lg:w-1/2 flex justify-center mb-4 lg:mb-0 h-full py-10">
           <img
             src={helmHero}
             alt="HELM Hero"
-            className="object-cover h-full" // Stretched to full height
-            style={{ maxWidth: "100%" }}
+            className="object-contain w-96" // Stretched to full height
           />
         </div>
 
         {/* Leaderboard section */}
-        <div className="w-full lg:w-1/2 flex justify-center h-full py-10">
-          <div
-            className="py-2 pb-6 rounded-3xl bg-gray-100 h-full" // Stretched to full height
-            style={{ maxWidth: "100%" }}
-          >
-            <MiniLeaderboard />
-            <div className="flex justify-end">
-              <Link to="leaderboard">
-                <button className="px-4 mx-3 mt-1 btn bg-white rounded-md">
-                  <span>See More</span>
-                </button>
-              </Link>
-            </div>
+        <div className="py-2 rounded-xl bg-gray-100 h-full">
+          <MiniLeaderboard />
+          <div className="flex justify-end">
+            <Link to="leaderboard">
+              <button className="px-4 mx-3 mt-2 btn bg-white rounded-md">
+                <span>See More</span>
+              </button>
+            </Link>
           </div>
         </div>
       </div>