Update/closer columns (#31)

* made columns closer

* inlined leaderboard

Author: shenrunzhang

src/pages/LeaderboardPage.css

@@ -11,21 +11,6 @@
 }
 
 
-.leaderboard-full-bleed {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  padding: 0 1rem;
-  margin-bottom: 2rem;
-}
-
-.leaderboard-full-bleed .leaderboard-container {
-  width:85vw;
-  margin: 0 auto;
-}
-
 .page-header {
   text-align: center;
   margin-bottom: 2rem;
@@ -367,14 +352,6 @@
   align-items: center;
 }
 
-.leaderboard-header > div,
-.leaderboard-row > div {
-  padding: 0.75rem 0.75rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 
 
 .leaderboard-body {
@@ -1772,14 +1749,6 @@
   align-items: center;
 }
 
-/* Prevent content like "closed-source" or long affiliations from stretching columns */
-.leaderboard-header > div,
-.leaderboard-row > div {
-  overflow: hidden;
-  /* text-overflow: ellipsis; */
-  white-space: nowrap;
-
-}
 
 
 /* Fix type badge and prevent flex growth */
@@ -1815,7 +1784,7 @@
 .leaderboard-row > div {
   padding: 0.75rem 0rem !important;
   text-align: left;
-  overflow: hidden;
+  overflow: visible;
   /* text-overflow: ellipsis; */
   white-space: nowrap;
 }

src/pages/LeaderboardPage.tsx

@@ -378,7 +378,6 @@ const LeaderboardPage: React.FC = () => {
         </div>
 
         {/* Leaderboard Table */}
-        <div className="leaderboard-full-bleed">
         <div className="leaderboard-container">
           <div className="leaderboard-scroll">
             <div className="leaderboard-header">
@@ -617,7 +616,6 @@ const LeaderboardPage: React.FC = () => {
             </div>
           </div>
         </div>
-        </div>
       {modelCardRouter && (
         <div className="model-card-modal-overlay" onClick={() => setModelCardRouter(null)}>
           <div className="model-card-modal" onClick={event => event.stopPropagation()}>