feat(ui): change display of component

Author: Mikadows

src/components/Benchmarks/BenchmarkDetail.tsx

@@ -110,9 +110,8 @@ const BenchmarkDetail = ({
         button="Back"
         navTo="/benchmarks"
       />
-      <div className="flex p-4">
-        <div className="grid flex-1 ">
-          {/*<div className="flex-1 mx-auto border-4 border-dashed border-gray-200 rounded-lg h-96 p-4">*/}
+      <div className="flex p-4 overflow-hidden">
+        <div className="grid flex-1">
           <div className="pl-8 pr-8 border-4 border-dashed border-gray-200 rounded-lg h-96 p-4">
             <div className="flex justify-between">
               <h1 className="text-2xl pb-3">Subject</h1>
@@ -216,9 +215,7 @@ const BenchmarkDetail = ({
             </div>
             <ReactMarkdown>{benchmarkData?.subject || ''}</ReactMarkdown>
           </div>
-          <Leaderboard
-            benchmarkId={benchmarkData?.id ? benchmarkData.id : ''}
-          />
+
         </div>
         <div className="grid flex-1">
           <div className="bg-gray-500 rounded-lg h-96">
@@ -228,24 +225,27 @@ const BenchmarkDetail = ({
               value={lastSubmission && lastSubmission}
               language={selected.name}
             />
-          </div>
-          <div className="justify-self-start ml-10">{result && result}</div>
-          <div className="justify-self-end flex-1">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded"
-              onClick={() => {
-                mutate({
-                  code: editorRef.current.getValue(),
-                  benchmarkId:
-                    benchmarkData?.id !== undefined ? benchmarkData.id : '',
-                  language: selected.name,
-                });
-              }}
-            >
-              Run code
-            </button>
+            <div className="grid justify-items-stretch">
+              <button
+                className="justify-self-end bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded"
+                onClick={() => {
+                  mutate({
+                    code: editorRef.current.getValue(),
+                    benchmarkId:
+                      benchmarkData?.id !== undefined ? benchmarkData.id : '',
+                    language: selected.name,
+                  });
+                }}
+              >
+                Run code
+              </button>
+            </div>
+            <div className="justify-self-start ml-10">{result && result}</div>
           </div>
         </div>
+        <Leaderboard
+          benchmarkId={benchmarkData?.id ? benchmarkData.id : ''}
+        />
       </div>
     </Page>
   );

src/components/leaderboard/Leaderboard.tsx

@@ -46,7 +46,7 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
   }
 
   return (
-    <div className="mt-3 ml-2">
+    <div className="mt-3 ml-2 flex-1">
       <div className="flex justify-between">
         <h1 className="text-2xl pb-3 ">Leaderboard</h1>
         <div>
@@ -144,11 +144,11 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
           </Listbox>
         </div>
       </div>
-      <div className="ml-2 flex flex-col h-80 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
+      <div className="ml-2 flex flex-col h-screen scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
         <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
             <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-              <table className="min-w-full divide-y divide-gray-200">
+              <table className=" divide-y divide-gray-200">
                 <thead className="bg-gray-50">
                   <tr>
                     <th