From 1507050128239d725978bc97dc4a2013b17fafe4 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sat, 27 Jan 2024 16:38:34 -0500
Subject: [PATCH] Switch to using tables for properties.

---
 src/OrgAst.module.css      | 31 +++++++++++++++++++++++++++++++
 src/OrgAst.module.css.d.ts |  1 +
 src/OrgAst.tsx             | 14 +++++++++-----
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css
index f59d224..117aef1 100644
--- a/src/OrgAst.module.css
+++ b/src/OrgAst.module.css
@@ -46,3 +46,34 @@
   padding: 5px 5px 5px 20px;
   background: #eeeeee;
 }
+
+.OrgAstProperties {
+  width: 100%;
+
+  > tbody {
+    > tr {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: #000000;
+
+      > th,
+      > td {
+        padding: 5px;
+      }
+
+      > th {
+        font-weight: 700;
+        text-align: right;
+        padding-right: 5px;
+        width: 0;
+      }
+    }
+
+    > tr:nth-child(odd) {
+      background-color: #eeeeee;
+    }
+    > tr:nth-child(even) {
+      background-color: #ffffff;
+    }
+  }
+}
diff --git a/src/OrgAst.module.css.d.ts b/src/OrgAst.module.css.d.ts
index 883d4d5..e0a2eaa 100644
--- a/src/OrgAst.module.css.d.ts
+++ b/src/OrgAst.module.css.d.ts
@@ -3,3 +3,4 @@ export const OrgAstNode: string;
 export const OrgAstNodeType: string;
 export const OrgAstChildren: string;
 export const selected: string;
+export const OrgAstProperties: string;
diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx
index 4a3e1d0..b50254c 100644
--- a/src/OrgAst.tsx
+++ b/src/OrgAst.tsx
@@ -137,15 +137,19 @@ const OrgPropertiesList = (props: {
   const entries = Object.entries(props.properties).map(([key, value]) => {
     return (
       <Fragment key={key}>
-        <dt>{key}</dt>
-        <dd>{JSON.stringify(value)}</dd>
+        <tr>
+          <th scope="row">{key}:</th>
+          <td>{JSON.stringify(value)}</td>
+        </tr>
       </Fragment>
     );
   });
   return (
-    <dl>
-      {entries}
-    </dl>
+    <table className={styles.OrgAstProperties}>
+      <tbody>
+        {entries}
+      </tbody>
+    </table>
   );
 };