From 4df3569298a5daf9c3a16110570ebaace7ed3a49 Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Thu, 17 Aug 2023 15:25:52 +0200
Subject: [PATCH] Improve detail overlay layout

---
 reports/src/App.css                        | 10 ++++++++++
 reports/src/capability/CapabilityTable.tsx | 17 ++++-------------
 reports/src/index.css                      |  6 +++---
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/reports/src/App.css b/reports/src/App.css
index 9d47df5..de92f31 100644
--- a/reports/src/App.css
+++ b/reports/src/App.css
@@ -40,4 +40,14 @@ th {
   th {
     background-color: dimgray;
   }
+}
+
+.detailOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  overflow: scroll;
 }
\ No newline at end of file
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index 8ea731d..2bf8efd 100644
--- a/reports/src/capability/CapabilityTable.tsx
+++ b/reports/src/capability/CapabilityTable.tsx
@@ -40,26 +40,17 @@ export const CheckRow = ({ check }: { check: Check }) => {
         {check.result === "pass" ? "PASS" : "FAIL"}
       </td>
       <td>
-        <a onClick={() => setShowDetails(true)}>Link</a>
+        <button onClick={() => setShowDetails(true)}>Open</button>
         {/* TODO: Beautify popup / move to a dedicated page */}
         {showDetails && (
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              background: "#fff",
-            }}
-          >
-            <a onClick={() => setShowDetails(false)}>
+          <div className="detailOverlay">
+            <div onClick={() => setShowDetails(false)}>
               <i>Click anywhere to close.</i>
               <h2>
                 {check.name} was evaluated in step {check.step.name}. Details:
               </h2>
               <pre>{JSON.stringify(check.details, null, 2)}</pre>
-            </a>
+            </div>
           </div>
         )}
       </td>
diff --git a/reports/src/index.css b/reports/src/index.css
index df44f4d..c8c38bf 100644
--- a/reports/src/index.css
+++ b/reports/src/index.css
@@ -38,8 +38,8 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+  border: 1px solid black;
+  padding: 0.3em 0.6em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
@@ -48,7 +48,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: turquoise;
 }
 button:focus,
 button:focus-visible {