From ce19908bc074aa0150c6416fe848e06a0ffa0040 Mon Sep 17 00:00:00 2001
From: "L. Karkkainen" <tronic@users.noreply.github.com>
Date: Tue, 7 Feb 2023 20:51:25 +0000
Subject: [PATCH] Implement key-value-table as dl instead of table element.

---
 sanic/pages/error.py             |  6 +++---
 sanic/pages/styles/BasePage.css  |  4 ++++
 sanic/pages/styles/ErrorPage.css | 24 +++++++++++++++---------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/sanic/pages/error.py b/sanic/pages/error.py
index 7f9b0ccb..c5f796e5 100644
--- a/sanic/pages/error.py
+++ b/sanic/pages/error.py
@@ -84,12 +84,12 @@ class ErrorPage(BasePage):
     def _key_value_table(
         self, title: str, table_id: str, data: Mapping[str, Any]
     ) -> None:
-        with self.doc.table(id=table_id, class_="key-value-table smalltext"):
-            self.doc.caption(title)
+        self.doc.h2(title)
+        with self.doc.dl(id=table_id, class_="key-value-table smalltext"):
             for key, value in data.items():
                 # Reading values may cause a new exception, so suppress it
                 try:
                     value = str(value)
                 except Exception:
                     value = E.em("Unable to display value")
-                self.doc.tr.td.span(key, class_="nobr key").td(value)
+                self.doc.dt.span(key, class_="nobr key").span(": ").dd(value)
diff --git a/sanic/pages/styles/BasePage.css b/sanic/pages/styles/BasePage.css
index f54cea91..592909df 100644
--- a/sanic/pages/styles/BasePage.css
+++ b/sanic/pages/styles/BasePage.css
@@ -58,6 +58,10 @@ h1 {
     text-align: left;
 }
 
+h2 {
+    margin: 1em 0 0.5em 0;
+}
+
 a:visited {
     color: inherit;
 }
diff --git a/sanic/pages/styles/ErrorPage.css b/sanic/pages/styles/ErrorPage.css
index bf0fc204..37ee0855 100644
--- a/sanic/pages/styles/ErrorPage.css
+++ b/sanic/pages/styles/ErrorPage.css
@@ -11,14 +11,20 @@ summary {
     --tracerite-highlight: var(--sanic-yellow);
 }
 
-.key-value-table {
-    margin: 2rem 0;
+dl.key-value-table {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-gap: 0.5rem;
+    white-space: pre-wrap;
 }
-
-.key-value-table caption {
-    caption-side: top;
-    text-align: left;
-    font-size: 1.25rem;
-    font-weight: 700;
-    padding-bottom: 0.5rem;
+dl.key-value-table * {
+    margin: 0;
+}
+dl.key-value-table dt {
+    color: gray;
+    word-break: break-word;
+}
+dl.key-value-table dd {
+    word-break: break-all;  /* Better breaking for cookies header and such */
 }