Implement key-value-table as dl instead of table element.

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)

sanic/pages/styles/BasePage.css

@@ -58,6 +58,10 @@ h1 {
     text-align: left;
 }
 
+h2 {
+    margin: 1em 0 0.5em 0;
+}
+
 a:visited {
     color: inherit;
 }

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 */
 }