style/about dialog: create a card-like table style

apps/client/src/widgets/dialogs/about.css

@@ -1,4 +1,6 @@
 .about-dialog {
+    --bs-modal-width: 650px;
+
     h2 {
         all: unset;
         font-size: 2em;
@@ -12,17 +14,10 @@
         align-items: center;
     }
 
-    .property-sheet-card {
+    .property-sheet-table {
         margin-block: 30px;
         font-size: .85em;
-
-        .tn-card-section {
-            display: flex;
-
-            > :first-child {
-                width: 100px;
-            }
-        }
+        margin-inline: 20px;  
     }
 
     .build-info {
@@ -68,4 +63,38 @@
             }
         }
     }
+}
+
+/* TODO: move to global styles */
+.property-sheet-table {
+    border-spacing: 0 2px;
+    border-collapse: separate;
+
+    tr {
+        --_br: 8px;
+        
+        background: var(--card-background-color);
+
+        &:first-child {
+            clip-path: inset(0 round var(--_br) var(--_br) 0 0);
+        }
+
+        &:last-child {
+            clip-path: inset(0 round 0 0 var(--_br) var(--_br));
+        }
+    }
+
+    td {
+        padding: 8px 16px;
+        vertical-align: top;
+
+        &:first-child {
+            white-space: nowrap;
+            color: var(--muted-text-color);
+        }
+
+        &:last-child {
+            width: 100%;
+        }
+    }
 }

apps/client/src/widgets/dialogs/about.tsx

@@ -49,10 +49,10 @@ export default function AboutDialog() {
                     triliumnotes.org
                 </a>
 
-                <Card className="property-sheet-card">
-                    <CardSection>
-                        <div>{t("about.version_label")}</div>
-                        <div  className="selectable-text">
+                <table className="property-sheet-table">
+                    <tr>
+                        <td>{t("about.version_label")}</td>
+                        <td  className="selectable-text">
                             {t("about.version", {
                                 appVersion: appInfo?.appVersion,
                                 dbVersion: appInfo?.dbVersion,
@@ -69,26 +69,26 @@ export default function AboutDialog() {
                                     }}
                                 />
                             </div>
-                        </div>
-                    </CardSection>
+                        </td>
+                    </tr>
                    
-                    <CardSection>
-                        <div>{t("about.contributors_label")}</div>
-                        <div className="contributor-list use-tn-links">
+                    <tr>
+                        <td>{t("about.contributors_label")}</td>
+                        <td className="contributor-list use-tn-links">
                             <Contributors data={contributors as ContributorList} />
                             <a href="https://github.com/TriliumNext/Trilium/graphs/contributors" target="_blank">
                                 {t("about.contributor_full_list")}
                             </a>
-                        </div>
-                    </CardSection>
+                        </td>
+                    </tr>
                     
-                    <CardSection>
-                        <div>{t("about.data_directory")}</div>
-                        <div className="selectable-text">
+                    <tr>
+                        <td>{t("about.data_directory")}</td>
+                        <td className="selectable-text">
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
-                        </div>
-                    </CardSection>
-                </Card>
+                        </td>
+                    </tr>
+                </table>
            </div>
 
            <footer>