Repository: open-energy-transition/solver-benchmark
Pull request #170: Website: edit content, add Caveats
Author: login: siddharth-krishna
Created: 2025-05-05T09:41:07Z | Merged: 2025-05-05T13:05:29Z



Diff:
diff --git a/website-nextjs/src/components/admin/BenchmarksSection.tsx b/website-nextjs/src/components/admin/BenchmarksSection.tsx
index 914e44d1..855abf74 100644
--- a/website-nextjs/src/components/admin/BenchmarksSection.tsx
+++ b/website-nextjs/src/components/admin/BenchmarksSection.tsx
@@ -55,11 +55,21 @@ const BenchmarksSection = ({ timeout }: BenchmarksSectionProps) => {
         <div className="pt-1.5 pb-3">
           <div className="text-navy font-bold text-xl">Runtime vs Memory</div>
 
-          <p className="flex gap-1 items-center text-dark-grey text-sm 4xl:text-xl">
-            <CloseIcon className="size-3" />
-            represents benchmarks that timed out, while
-            <CircleIcon className="size-3" />
-            indicates a successful run.
+          <p className="flex flex-wrap gap-1 items-center text-dark-grey text-sm 4xl:text-xl">
+            <span>
+              Click on any point in this graph to see details of the benchmark
+              instance.
+            </span>
+            <span className="flex items-center gap-1">
+              <CloseIcon className="size-3" />
+              <span>
+                represents benchmark instances that timed out or errored,
+              </span>
+            </span>
+            <span className="flex items-center gap-1">
+              <CircleIcon className="size-3" />
+              <span>indicates a successful run.</span>
+            </span>
           </p>
         </div>
       </div>
diff --git a/website-nextjs/src/components/admin/FilterSection.tsx b/website-nextjs/src/components/admin/FilterSection.tsx
index ac71946e..628e27f7 100644
--- a/website-nextjs/src/components/admin/FilterSection.tsx
+++ b/website-nextjs/src/components/admin/FilterSection.tsx
@@ -273,7 +273,7 @@ const FilterSection = () => {
     <div>
       <div className="pt-2.5 px-8 pb-2 flex items-center justify-between gap-1 border-stroke border-b">
         <div className="flex gap-2 items-center">
-          <div className="text-navy font-bold text-base">Filter</div>
+          <div className="text-navy font-bold text-base">Filters</div>
         </div>
 
         <div className="flex justify-end ml-2">
diff --git a/website-nextjs/src/components/admin/ResultsSections.tsx b/website-nextjs/src/components/admin/ResultsSections.tsx
index af29f89c..7e20c256 100644
--- a/website-nextjs/src/components/admin/ResultsSections.tsx
+++ b/website-nextjs/src/components/admin/ResultsSections.tsx
@@ -103,7 +103,6 @@ const ResultsSection = ({ timeout }: ResultsSectionProps) => {
         return benchmarkLatestResults;
     }
   }, [sgmMode, xFactor, availableSolvers, timeout, selectedFilters]);
-
   const [tableData, setTableData] = useState<TableRowType[]>([]);
   const [sortConfig, setSortConfig] = useState<{
     field: string;
@@ -412,11 +411,11 @@ const ResultsSection = ({ timeout }: ResultsSectionProps) => {
     <div>
       <div className="pb-3">
         <ResultsSectionsTitle benchmarkResults={benchmarkResults} />
-        <div className="text-navy px-5 text-sm block items-center mt-2">
+        <div className="text-navy px-5 text-l block items-center mt-2">
           <span>
-            You can rank the latest version of each solver by number of solved
-            benchmark instances, or by the normalized shifted geometric mean
-            (SGM
+            This table summarizes all the benchmark results of the latest
+            version of each solver on the selected configuration. You can rank
+            the solvers by the normalized shifted geometric mean (SGM
           </span>
           <span className="inline-flex gap-2">
             <Popup
@@ -447,7 +446,11 @@ const ResultsSection = ({ timeout }: ResultsSectionProps) => {
               </div>
             </Popup>
           </span>
-          <span> of runtime and memory consumption over all benchmarks</span>
+          <span>
+            &nbsp; of runtime or memory consumption over all benchmarks, or by
+            the number of solved benchmark instances. Click on any column header
+            to sort the results by that column.
+          </span>
         </div>
       </div>
 
diff --git a/website-nextjs/src/components/admin/compare-solvers/SolverSelection.tsx b/website-nextjs/src/components/admin/compare-solvers/SolverSelection.tsx
index aabc43b6..a6fd7be9 100644
--- a/website-nextjs/src/components/admin/compare-solvers/SolverSelection.tsx
+++ b/website-nextjs/src/components/admin/compare-solvers/SolverSelection.tsx
@@ -142,7 +142,8 @@ const SolverSelection = () => {
         <p className="text-[#5D5D5D] text-sm sm:text-base 4xl:text-lg">
           The benchmarks on the upper triangle of each graph are those where
           Solver 1 performs better, and those in the lower triangle are those
-          where Solver 2 performs better
+          where Solver 2 performs better. Click on any point in this graph to
+          see details of that benchmark instance.{" "}
         </p>
       </div>
       <div className="flex flex-col lg:flex-row gap-4">
diff --git a/website-nextjs/src/components/shared/ContentWrapper.tsx b/website-nextjs/src/components/shared/ContentWrapper.tsx
index 3dba0e05..5d31b3ea 100644
--- a/website-nextjs/src/components/shared/ContentWrapper.tsx
+++ b/website-nextjs/src/components/shared/ContentWrapper.tsx
@@ -27,9 +27,9 @@ const ContentWrapper = ({
         ${isNavExpanded ? "md:ml-64" : "md:ml-20"}
         `}
     >
-      <div className="max-w-8xl mx-auto">
+      <div className="max-w-8xl mx-auto text-navy">
         {header && <div>{header}</div>}
-        <div className="sm:flex">
+        <div className="sm:flex bg-[#E6ECF5] border border-stroke border-t-0 pb-6 p-4 mt-6 rounded-[32px]">
           {showFilter && (
             <div className="m-4 sm:x-0 sm:w-1/5 overflow-hidden bg-white rounded-xl h-max">
               <FilterSection />
diff --git a/website-nextjs/src/components/shared/D3PlotChart.tsx b/website-nextjs/src/components/shared/D3PlotChart.tsx
index 3d3315a9..d2ab7b8e 100644
--- a/website-nextjs/src/components/shared/D3PlotChart.tsx
+++ b/website-nextjs/src/components/shared/D3PlotChart.tsx
@@ -378,7 +378,7 @@ const D3Chart = ({ chartData = [], onPointClick }: D3ChartProps) => {
         {Object.keys(solverColors).map((solverKey) => (
           <div
             key={solverKey}
-            className="border-[#CAD9EF] border py-1 px-3 sm:px-5 uppercase bg-white text-[9px] flex items-center gap-1 rounded-md h-max w-max 4xl:text-base"
+            className="border-[#CAD9EF] border py-1 px-2 sm:px-5 uppercase bg-white text-[9px] flex items-center gap-1 rounded-md h-max w-max"
           >
             <CircleIcon
               style={{ color: solverColors[solverKey] }}
diff --git a/website-nextjs/src/components/shared/Navbar.tsx b/website-nextjs/src/components/shared/Navbar.tsx
index 2d901271..8b1bfb16 100644
--- a/website-nextjs/src/components/shared/Navbar.tsx
+++ b/website-nextjs/src/components/shared/Navbar.tsx
@@ -22,12 +22,12 @@ const Navbar = () => {
 
   const navConfig = [
     {
-      label: "Home",
+      label: "Main Results",
       route: "/dashboard/home",
       icon: <AlignLeftJustifyIcon />,
     },
     {
-      label: "Benchmark details",
+      label: "Benchmark Set",
       route: PATH_DASHBOARD.benchmarkDetail.list,
       icon: <ChartBarIcon />,
     },
@@ -37,12 +37,12 @@ const Navbar = () => {
       icon: <VectorSquareIcon />,
     },
     {
-      label: "Compare solvers",
+      label: "Compare Solvers",
       route: "/dashboard/compare-solvers",
       icon: <BalanceScaleIcon />,
     },
     {
-      label: "Performance history",
+      label: "Performance History",
       route: "/dashboard/performance-history",
       icon: <ChartLineIcon />,
     },
diff --git a/website-nextjs/src/pages/dashboard/benchmark-details.tsx b/website-nextjs/src/pages/dashboard/benchmark-details.tsx
index e3fdc385..a2fbb156 100644
--- a/website-nextjs/src/pages/dashboard/benchmark-details.tsx
+++ b/website-nextjs/src/pages/dashboard/benchmark-details.tsx
@@ -213,22 +213,22 @@ const PageBenchmarkDetail = () => {
                       className="size-3 4xl:size-4 stroke-navy"
                     />
                     <span className="self-center font-semibold whitespace-nowrap">
-                      Benchmark Details
+                      Benchmark Set
                     </span>
                   </div>
                 </div>
               </AdminHeader>
-              <div className="py-2">
-                <div className="text-navy text-xl font-bold 4xl:text-2xl">
-                  Benchmarks
+              <div className="text-navy">
+                <div className="font-lato font-bold text-2xl/1.4">
+                  Benchmark Set
                 </div>
-                <p className="text-[#5D5D5D] 4xl:text-xl">
+                <p className="font-lato font-normal/1.4 text-l max-w-screen-lg">
                   On this page you can see details of all the benchmarks on our
                   platform, including their source and download links.
                 </p>
               </div>
             </div>
-            <div className="bg-[#E6ECF5] border border-stroke border-t-0 pb-6 p-8 rounded-[32px]">
+            <div className="bg-[#E6ECF5] border border-stroke border-t-0 pb-6 p-8 mt-6 rounded-[32px]">
               <div className="sm:flex justify-between">
                 <div className="sm:x-0 sm:w-[224px] overflow-hidden bg-[#F4F6FA] rounded-xl h-max">
                   <BenchmarkDetailFilterSection
diff --git a/website-nextjs/src/pages/dashboard/compare-solvers.tsx b/website-nextjs/src/pages/dashboard/compare-solvers.tsx
index fef8d145..43071a03 100644
--- a/website-nextjs/src/pages/dashboard/compare-solvers.tsx
+++ b/website-nextjs/src/pages/dashboard/compare-solvers.tsx
@@ -28,22 +28,35 @@ const PageCompareSolvers = () => {
         <Navbar />
         <ContentWrapper
           header={
-            <AdminHeader>
-              <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
-                <div className="flex items-center gap-1">
-                  <Link href={PATH_DASHBOARD.root}>
-                    <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
-                  </Link>
-                  <ArrowIcon
-                    fill="none"
-                    className="size-3 stroke-navy 4xl:size-4"
-                  />
-                  <span className="self-center font-semibold whitespace-nowrap">
-                    Compare Solvers
-                  </span>
+            <div className="max-w-8xl mx-auto">
+              <AdminHeader>
+                <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
+                  <div className="flex items-center gap-1">
+                    <Link href={PATH_DASHBOARD.root}>
+                      <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
+                    </Link>
+                    <ArrowIcon
+                      fill="none"
+                      className="size-3 stroke-navy 4xl:size-4"
+                    />
+                    <span className="self-center font-semibold whitespace-nowrap">
+                      Compare Solvers
+                    </span>
+                  </div>
                 </div>
+              </AdminHeader>
+              <div className="font-lato font-bold text-2xl/1.4">
+                Compare Solvers
               </div>
-            </AdminHeader>
+              <div className="font-lato font-normal/1.4 text-l max-w-screen-lg">
+                This page lets you compare any two solvers (including versions)
+                on any subset of the benchmarks. This can be used to find
+                benchmarks where one solver performs better than another. It is
+                also useful for solver developers who want to compare two
+                versions of their solver to see which benchmarks the performance
+                improved or degraded on.
+              </div>
+            </div>
           }
         >
           {/* Content */}
diff --git a/website-nextjs/src/pages/dashboard/home.tsx b/website-nextjs/src/pages/dashboard/home.tsx
index 2fd26e14..373454be 100644
--- a/website-nextjs/src/pages/dashboard/home.tsx
+++ b/website-nextjs/src/pages/dashboard/home.tsx
@@ -26,7 +26,7 @@ const LandingPage = () => {
   return (
     <>
       <Head>
-        <title>Home</title>
+        <title>Main Results</title>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -54,7 +54,7 @@ const LandingPage = () => {
                       <HomeIcon className="w-4 sm:w-[1.125rem] h-4 sm:h-[1.125rem]" />
                     </Link>
                     <span className="self-center font-semibold whitespace-nowrap">
-                      Main page
+                      Main Results
                     </span>
                   </div>
                 </div>
@@ -62,12 +62,15 @@ const LandingPage = () => {
               <div className="font-lato font-bold text-2xl/1.4">
                 Main Results
               </div>
-              <div className="font-lato font-normal/1.4 text-xs max-w-screen-lg">
-                We run our benchmarks using 2 different configurations: Small
-                benchmarks are run with a smaller timeout on a smaller machine,
-                and Large benchmarks are run with a larger timeout on a larger
-                machine. Select the appropriate tab below to view the results
-                for each configuration.
+              <div className="font-lato font-normal/1.4 text-l max-w-screen-lg">
+                We run our benchmarks on 2 different configurations: The{" "}
+                <b>Short</b> tab below contains results of the smaller
+                benchmarks (less than a million variables), run with a 1 hour
+                timeout on a smaller machine (c4-standard-2). The <b>Long</b>{" "}
+                tab contains larger benchmarks (more than a million variables),
+                run with a 10 hour timeout on a larger machine (c4-highmem-8).
+                Select the desired tab to view a summary of the results on that
+                configuration.
               </div>
             </div>
             <div className="flex mt-6">
@@ -114,14 +117,18 @@ const LandingPage = () => {
                       <></>
                     )}
                     <div className="px-5 py-2 text-navy font-lato border border-[#CAD9EF] bg-[#F7F7F9] rounded-2xl">
-                      <div className="text-xl/1.4 font-bold">Note 🔔 ️</div>
                       <div className="pt-2 text-xs/1.4 font-normal">
-                        As with all benchmarks, our results provide only an
-                        indication of which solvers might be good for your
-                        problems. We recommend using our scripts to benchmark on
-                        your own problems before picking a solver See also the
-                        section on <span className="underline">Caveats</span>{" "}
-                        below.
+                        <b>🔔 Note:</b> As with all benchmarks, our results
+                        provide only an indication of which solvers might be
+                        good for your problems. We recommend using{" "}
+                        <span className="underline">
+                          <a href="https://github.com/open-energy-transition/solver-benchmark/">
+                            our scripts
+                          </a>
+                        </span>{" "}
+                        to benchmark on your own problems before picking a
+                        solver See also the section on{" "}
+                        <span className="underline">Caveats</span> below.
                       </div>
                     </div>
                     <BenchmarksSection timeout={timeout} />
@@ -132,10 +139,37 @@ const LandingPage = () => {
                         </div>
                         <div className="text-navy text-sm block items-center mt-2">
                           <span>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing
-                            elit, sed do eiusmod tempor incididunt ut labore et
-                            dolore magna aliqua. Ut enim ad minim veniam, quis
-                            nostrud
+                            Here are some key points to keep in mind when
+                            interpreting these results:
+                            <ul className="list-disc pl-5">
+                              <li>
+                                We run benchmarks on commercial cloud virtual
+                                machines (VMs) for efficiency and cost reasons.
+                                The shared nature of cloud resources means there
+                                is some error in our runtime measurements, which
+                                we estimate as a coefficient of variation of no
+                                larger than 4%. More details on this{" "}
+                                <span className="underline">here</span>.
+                              </li>
+                              <li>
+                                All solvers are run with their default options.
+                              </li>
+                              <li>
+                                Mixed Integer benchmarks (MILPs) are run with a
+                                duality gap tolerance of 0.0004.
+                              </li>
+                              <li>
+                                All results on this website use the runtime
+                                measured by our benchmarking script. This may
+                                not be the same as the runtime of the solving
+                                algorithm as reported by the solver, and it may
+                                include things like time for input file parsing
+                                and license checks. See more details and join
+                                the discussion on whether to use reported or
+                                measured runtime{" "}
+                                <span className="underline">here</span>.
+                              </li>
+                            </ul>
                           </span>
                         </div>
                       </div>
diff --git a/website-nextjs/src/pages/dashboard/performance-history.tsx b/website-nextjs/src/pages/dashboard/performance-history.tsx
index bb79ed78..4b302872 100644
--- a/website-nextjs/src/pages/dashboard/performance-history.tsx
+++ b/website-nextjs/src/pages/dashboard/performance-history.tsx
@@ -158,22 +158,35 @@ const PagePerformanceHistory = () => {
         <Navbar />
         <ContentWrapper
           header={
-            <AdminHeader>
-              <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
-                <div className="flex items-center gap-1">
-                  <Link href={PATH_DASHBOARD.root}>
-                    <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
-                  </Link>
-                  <ArrowIcon
-                    fill="none"
-                    className="size-3 4xl:size-4 stroke-navy"
-                  />
-                  <span className="self-center font-semibold whitespace-nowrap">
-                    Performance History
-                  </span>
+            <div className="max-w-8xl mx-auto">
+              <AdminHeader>
+                <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
+                  <div className="flex items-center gap-1">
+                    <Link href={PATH_DASHBOARD.root}>
+                      <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
+                    </Link>
+                    <ArrowIcon
+                      fill="none"
+                      className="size-3 4xl:size-4 stroke-navy"
+                    />
+                    <span className="self-center font-semibold whitespace-nowrap">
+                      Performance History
+                    </span>
+                  </div>
                 </div>
+              </AdminHeader>
+              <div className="font-lato font-bold text-2xl/1.4">
+                Performance History
               </div>
-            </AdminHeader>
+              <div className="font-lato font-normal/1.4 text-l max-w-screen-lg">
+                This page tracks the performance of different solvers over time.
+                This can be used to see which solvers are improving, and on what
+                kinds of benchmarks. Once again, you can filter the benchmark
+                set to your problems of interest and the graphs will
+                automatically re-generate to show you the performance history on
+                your chosen subset.
+              </div>
+            </div>
           }
         >
           {/* Content */}
diff --git a/website-nextjs/src/pages/dashboard/raw-result.tsx b/website-nextjs/src/pages/dashboard/raw-result.tsx
index 82761386..5d2aef5a 100644
--- a/website-nextjs/src/pages/dashboard/raw-result.tsx
+++ b/website-nextjs/src/pages/dashboard/raw-result.tsx
@@ -21,22 +21,32 @@ const PagePerformanceHistory = () => {
         <Navbar />
         <ContentWrapper
           header={
-            <AdminHeader>
-              <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
-                <div className="flex items-center gap-1">
-                  <Link href={PATH_DASHBOARD.root}>
-                    <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
-                  </Link>
-                  <ArrowIcon
-                    fill="none"
-                    className="size-3 4xl:size-4 stroke-navy"
-                  />
-                  <span className="self-center font-semibold whitespace-nowrap">
-                    Full Result
-                  </span>
+            <div className="max-w-8xl mx-auto">
+              <AdminHeader>
+                <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
+                  <div className="flex items-center gap-1">
+                    <Link href={PATH_DASHBOARD.root}>
+                      <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
+                    </Link>
+                    <ArrowIcon
+                      fill="none"
+                      className="size-3 4xl:size-4 stroke-navy"
+                    />
+                    <span className="self-center font-semibold whitespace-nowrap">
+                      Full Results
+                    </span>
+                  </div>
                 </div>
+              </AdminHeader>
+              <div className="font-lato font-bold text-2xl/1.4">
+                Full Results
               </div>
-            </AdminHeader>
+              <div className="font-lato font-normal/1.4 text-l max-w-screen-lg">
+                This page contains the full and raw set of benchmark results
+                from our platform. You can, as usual, filter the results to your
+                area of interest and download the filtered data as a CSV file.
+              </div>
+            </div>
           }
         >
           {/* Content */}
diff --git a/website-nextjs/src/pages/dashboard/solvers.tsx b/website-nextjs/src/pages/dashboard/solvers.tsx
index 18eaefb7..be1b0b40 100644
--- a/website-nextjs/src/pages/dashboard/solvers.tsx
+++ b/website-nextjs/src/pages/dashboard/solvers.tsx
@@ -21,22 +21,30 @@ const PageSolvers = () => {
         <Navbar />
         <ContentWrapper
           header={
-            <AdminHeader>
-              <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
-                <div className="flex items-center gap-1">
-                  <Link href={PATH_DASHBOARD.root}>
-                    <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
-                  </Link>
-                  <ArrowIcon
-                    fill="none"
-                    className="size-3 4xl:size-4 stroke-navy"
-                  />
-                  <span className="self-center font-semibold whitespace-nowrap">
-                    Solvers
-                  </span>
+            <div>
+              <AdminHeader>
+                <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
+                  <div className="flex items-center gap-1">
+                    <Link href={PATH_DASHBOARD.root}>
+                      <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
+                    </Link>
+                    <ArrowIcon
+                      fill="none"
+                      className="size-3 4xl:size-4 stroke-navy"
+                    />
+                    <span className="self-center font-semibold whitespace-nowrap">
+                      Solvers
+                    </span>
+                  </div>
                 </div>
+              </AdminHeader>
+              <div className="font-lato font-bold text-2xl/1.4">Solvers</div>
+              <div className="font-lato font-normal/1.4 text-l max-w-screen-lg">
+                This page shows details of each solver available on this
+                platform, along with a relative performance plot that lets you
+                compare the selected solver against all other solvers.
               </div>
-            </AdminHeader>
+            </div>
           }
         >
           <>


Reviews:
user: login: siddharth-krishna
body: @jacek-oet could you please help me with some issues on this PR? I tried to edit/add some content but I wasn't able to make it look good :)
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-05T09:44:40Z
user: login: jacek-oet
body: LGTM
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-05T12:03:26Z

Review comments:
diff_hunk: @@ -56,8 +56,9 @@ const BenchmarksSection = ({ timeout }: BenchmarksSectionProps) => {
           <div className="text-navy font-bold text-xl">Runtime vs Memory</div>
 
           <p className="flex gap-1 items-center text-dark-grey text-sm 4xl:text-xl">
-            <CloseIcon className="size-3" />
-            represents benchmarks that timed out, while
+            Click on any point in this graph to see details of the benchmark
+            instance. <CloseIcon className="size-3" />
+            represents benchmark instances that timed out or errored, while
path: website-nextjs/src/components/admin/BenchmarksSection.tsx
user: login: siddharth-krishna
body: @jacek-oet could you please take a quick look at this? On some screen sizes the icons break up the text in a funny way.
created_at: 2025-05-05T09:42:15Z
author_association: MEMBER
diff_hunk: @@ -28,22 +28,35 @@ const PageCompareSolvers = () => {
         <Navbar />
         <ContentWrapper
           header={
-            <AdminHeader>
-              <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
-                <div className="flex items-center gap-1">
-                  <Link href={PATH_DASHBOARD.root}>
-                    <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
-                  </Link>
-                  <ArrowIcon
-                    fill="none"
-                    className="size-3 stroke-navy 4xl:size-4"
-                  />
-                  <span className="self-center font-semibold whitespace-nowrap">
-                    Compare Solvers
-                  </span>
+            <div className="max-w-8xl mx-auto">
+              <AdminHeader>
+                <div className="flex text-navy text-sm text-opacity-50 items-center space-x-1 4xl:text-lg">
+                  <div className="flex items-center gap-1">
+                    <Link href={PATH_DASHBOARD.root}>
+                      <HomeIcon className="w-[1.125rem] h-[1.125rem 4xl:size-5" />
+                    </Link>
+                    <ArrowIcon
+                      fill="none"
+                      className="size-3 stroke-navy 4xl:size-4"
+                    />
+                    <span className="self-center font-semibold whitespace-nowrap">
+                      Compare Solvers
+                    </span>
+                  </div>
                 </div>
+              </AdminHeader>
+              <div className="font-lato font-bold text-2xl/1.4">
+                Compare Solvers
path: website-nextjs/src/pages/dashboard/compare-solvers.tsx
user: login: siddharth-krishna
body: @jacek-oet can you check that this is correct? I tried to add a main header and introductory paragraph to all dashboards, but it looks different on different dashboards. Would be nice to have a consistent look.
created_at: 2025-05-05T09:43:24Z
author_association: MEMBER
diff_hunk: @@ -132,10 +139,37 @@ const LandingPage = () => {
                         </div>
                         <div className="text-navy text-sm block items-center mt-2">
                           <span>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing
-                            elit, sed do eiusmod tempor incididunt ut labore et
-                            dolore magna aliqua. Ut enim ad minim veniam, quis
-                            nostrud
+                            Here are some key points to keep in mind when
+                            interpreting these results:
+                            <ul>
+                              <li>
path: website-nextjs/src/pages/dashboard/home.tsx
user: login: siddharth-krishna
body: @jacek-oet this list isn't showing up on the website. Do we need to add some style to it? A normal bullet list is good for now.
created_at: 2025-05-05T09:43:59Z
author_association: MEMBER

PR comments:
user: login: vercel[bot]
created_at: 2025-05-05T09:41:11Z
body: [vc]: #T+g/RF4+9iJX5BVzfAXBCZatMjN1EuDB77L77Y5fhIA=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJzb2x2ZXItYmVuY2htYXJrIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL29wZW5lbmVyZ3l0cmFuc2l0aW9uL3NvbHZlci1iZW5jaG1hcmsvM01RMVBnZUdoc1BZUGZTcW9tVENTMVhYMVY2dCIsInByZXZpZXdVcmwiOiIiLCJuZXh0Q29tbWl0U3RhdHVzIjoiQ0FOQ0VMRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sInJvb3REaXJlY3RvcnkiOiJ3ZWJzaXRlLW5leHRqcyJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **solver-benchmark** | 🛑 Canceled ([Inspect](https://vercel.com/openenergytransition/solver-benchmark/3MQ1PgeGhsPYPfSqomTCS1XX1V6t)) |  |  | May 5, 2025 1:06pm |


author_association: NONE
user: login: danielelerede-oet
created_at: 2025-05-05T09:53:35Z
body: Hi @siddharth-krishna the text you added for the different sections works for me!
author_association: MEMBER
user: login: siddharth-krishna
created_at: 2025-05-05T12:18:36Z
body: @jacek-oet thanks for all the fixes! One tiny thing: the header of Benchmark Set looks slightly different to the others could you please help? 🙏 
![image](https://github.com/user-attachments/assets/c003d64d-4010-4905-856c-f47fe532033d)

![image](https://github.com/user-attachments/assets/b7d57fea-164d-4832-854f-aa9ec7adef9c)


author_association: MEMBER