fix : Responsive compare page

website/src/common/Macrobench.tsx

@@ -19,11 +19,12 @@ import PropTypes from 'prop-types';
 import { Link } from "react-router-dom";
 import { formatByte, fixed, secondToMicrosecond } from "../utils/Utils";
 import {twMerge} from "tailwind-merge";
+import { Table, TableBody, TableHead, TableHeader,TableRow, } from "../components/ui/table";
 
 export default function Macrobench({ data, gitRef, commits }) {
   return (
     <div className="w-full border border-primary rounded-xl relative shadow-lg">
-      <div className="p-5 flex flex-col gap-y-3">
+      <div className="pt-2 pl-2 md:p-4 flex flex-col gap-y-3">
         <h3 className="text-start text-3xl font-medium">{data.type}</h3>
         <span className="flex gap-x-1">
           Click
@@ -33,45 +34,46 @@ export default function Macrobench({ data, gitRef, commits }) {
           >
             here
           </Link>
-          to see the query plans comparison for this benchmark.
+          to see the query plans comparison
+          <span className="hidden md:block">
+                for this benchmark.
+          </span>
+        </span>
+         <span className="md:hidden">
+            for this benchmark.
         </span>
       </div>
 
-      <table>
-        <thead>
-          <tr>
-            <th />
-            <th>
+      <Table className="text-base">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="text-center">
+              <h1>{" "}</h1>
+            </TableHead>
+            <TableHead className="text-center">
               <Link
                 target="_blank"
                 to={`https://github.com/vitessio/vitess/commit/${commits.old}`}
-                className="text-primary"
+                className="text-primary font-bold"
               >
                 {gitRef.old || "Old"}
               </Link>
-            </th>
-            <th>
+            </TableHead>
+            <TableHead className="text-center font-medium">
               <Link
                 target="_blank"
                 to={`https://github.com/vitessio/vitess/commit/${commits.new}`}
-                className="text-primary"
+                className="text-primary font-bold"
               >
                 {gitRef.new || "New"}
               </Link>
-            </th>
-            <th>
-              <h4>P</h4>
-            </th>
-            <th>
-              <h4>Delta</h4>
-            </th>
-            <th>
-              <h4>Significant</h4>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
+            </TableHead>
+            <TableHead className="text-center text-white font-bold"><h4>P</h4></TableHead>
+            <TableHead className="text-center text-white font-bold"><h4>Delta</h4></TableHead>
+            <TableHead className="text-center text-white font-bold "><h4>Significant</h4></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           <Row
             title={"QPS Total"}
             oldVal={data.result.total_qps.old}
@@ -200,8 +202,8 @@ export default function Macrobench({ data, gitRef, commits }) {
             p={fixed(data.result.components_mem_stats_alloc_bytes.vttablet.p, 3)}
             fmt={"memory"}
           />
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }

website/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/library/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

website/src/pages/ComparePage/ComparePage.tsx

@@ -21,7 +21,7 @@ import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import Macrobench from "../../common/Macrobench";
 import { CompareData } from '@/types'
- 
+
 export default function Compare() {
   const urlParams = new URLSearchParams(window.location.search);
 
@@ -63,12 +63,12 @@ export default function Compare() {
       )}
 
       {!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (
-        <section className="flex flex-col items-center">
-          <h3 className="my-6 text-primary text-2xl">Macro Benchmarks</h3>
+        <section>
+          <h3 className="my-6 flex justify-center text-primary text-2xl">Macro Benchmarks</h3>
           <div className="flex flex-col gap-y-20">
             {compareData.map((macro, index) => {
               return (
-                <div key={index}>
+                <div key={index} className="mb-20">
                   <Macrobench
                     data={macro}
                     gitRef={{

website/src/pages/ComparePage/components/Hero.tsx

@@ -20,11 +20,11 @@ export default function Hero(props: { gitRef: any; setGitRef: any }) {
   const { gitRef, setGitRef } = props;
 
   return (
-    <section className="flex flex-col h-[32vh] pt-[8vh] justify-center items-center">
+    <section className="flex flex-col h-[32vh] pt-[2vh] md:pt-[8vh] justify-center items-center">
       <h1 className="mb-3 text-front text-opacity-70">
         Enter SHAs to compare commits
       </h1>
-      <div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[2px] rounded-full">
+      <div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[1px] md:p-[2px] rounded-full">
         <ComparisonInput
           name="old"
           className="rounded-l-full"
@@ -56,7 +56,7 @@ function ComparisonInput(props: {
       name={name}
       className={twMerge(
         className,
-        "relative text-xl px-6 py-2 bg-background focus:border-none focus:outline-none border border-primary"
+        "relative md:text-xl text-center text-base md:px-6 md:py-2 py-1 bg-background focus:border-none focus:outline-none border border-primary"
       )}
       defaultValue={gitRef[name]}
       placeholder={`${name} SHA`}