From cd751f9494d117d2b30b5db5e6e208ba2ae981f8 Mon Sep 17 00:00:00 2001
From: Javier Cladellas <javiercladellas@gmail.com>
Date: Wed, 5 Feb 2025 14:26:08 +0100
Subject: [PATCH] prettier ui & fix overflow in param table :)

---
 .../report/templates/benchmark.adoc.j2        | 11 ++-
 .../report/templates/css/figures.css          | 69 ++++++++++++++++---
 2 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/src/feelpp/benchmarking/report/templates/benchmark.adoc.j2 b/src/feelpp/benchmarking/report/templates/benchmark.adoc.j2
index 8657e2cb5..dadee9a52 100644
--- a/src/feelpp/benchmarking/report/templates/benchmark.adoc.j2
+++ b/src/feelpp/benchmarking/report/templates/benchmark.adoc.j2
@@ -21,7 +21,15 @@ include::ROOT:{{description_path}}[leveloffset=+1]
 * Total Tests: {{ session_info.num_cases }}
 * Failures: {{ session_info.num_failures }}
 
-
+++++
+<style>
+.scrollable {
+  overflow-x: auto;
+}
+</style>
+++++
+[.scrollable]
+--
 |===
 {% for header in hash_params_headers %} | {% if header == 'partial_filepath' or header == 'logs_filepath' %} {% else %} {{ header }} {% endif %} {% endfor %}
 
@@ -32,6 +40,7 @@ include::ROOT:{{description_path}}[leveloffset=+1]
 
 {% endfor %}
 |===
+--
 
 {% if not empty %}
 ++++
diff --git a/src/feelpp/benchmarking/report/templates/css/figures.css b/src/feelpp/benchmarking/report/templates/css/figures.css
index 0a259322a..e0aed6204 100644
--- a/src/feelpp/benchmarking/report/templates/css/figures.css
+++ b/src/feelpp/benchmarking/report/templates/css/figures.css
@@ -1,25 +1,78 @@
 .figure-container {
     position: relative;
-  }
+    margin: 1.5rem auto;
+    padding: 1rem;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
 
-  .subfigure-container {
+.subfigure-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    transition: opacity 0.2s ease;
-  }
+    background-color: #f9f9f9;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+}
 
-  .subfigure-container.active {
+.subfigure-container.active {
     position: relative;
     opacity: 1;
     pointer-events: auto;
     z-index: 1;
-  }
+}
 
-  .subfigure-container.inactive {
+.subfigure-container.inactive {
     opacity: 0;
     pointer-events: none;
     z-index: 0;
-  }
\ No newline at end of file
+}
+
+/* Tabs container: display buttons inline with a bottom border to indicate grouping */
+.tabs-container {
+    display: flex;
+    border-bottom: 2px solid #007acc;
+    margin-bottom: 0.5rem;
+}
+
+/* Figure tab button styling */
+.figure-tab {
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0.5rem 1rem;
+    margin-right: 0.3rem;
+    font-size: 1rem;
+    color: #007acc;
+    cursor: pointer;
+    border-radius: 4px 4px 0 0;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.figure-tab:hover,
+.figure-tab.active {
+    background-color: #007acc;
+    color: #fff;
+}
+
+.export-container button {
+    background-color: #007acc;
+    color: #fff;
+    border: none;
+    padding: 0.4rem 0.8rem;
+    margin-right: 0.4rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease;
+}
+
+.export-container button:hover {
+    background-color: #005fa3;
+}
\ No newline at end of file