client: refactor

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

@@ -1,5 +1,4 @@
 .about-dialog {
-
     :where(body.light-theme &) {
         --donate-button-color: #e33f3b;
         
@@ -61,7 +60,7 @@
         align-items: center;
     }
 
-    .property-sheet-table {
+    .about-dialog-property-sheet {
         margin-block: 30px;
         font-size: .85em;
         margin-inline: 20px;  

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

@@ -80,7 +80,7 @@ export default function AboutDialog() {
                     triliumnotes.org
                 </a>
 
-                <PropertySheet>
+                <PropertySheet className="about-dialog-property-sheet">
                     <PropertySheetItem label={t("about.version_label")}>
                         {t("about.version", {
                             appVersion: appInfo?.appVersion,

apps/client/src/widgets/react/PropertySheet.css

@@ -1,6 +1,8 @@
-.property-sheet-table {
+:where(.property-sheet) {
     --border-radius: 8px;
+}
 
+.property-sheet {
     dl {
         background: var(--card-background-color);
 
@@ -14,8 +16,7 @@
     }
 }
 
-@media (min-width: 600px) {
-    .property-sheet-table {
+.property-sheet-container.wide .property-sheet {
         display: table;
         border-spacing: 0 2px;
         border-collapse: separate;
@@ -41,43 +42,41 @@
 
         dt {
             white-space: nowrap;
+            font-weight: normal;
         }
 
         dl {
             width: 100%;
     }
-    }
 }
 
-@media (max-width: 599px) {
-    .property-sheet-table {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
+.property-sheet-container.narrow .property-sheet {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
 
-        dl {
+    dl {
+        margin: 0;
+        padding: 12px 20px;
+
+        &:first-child {
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        &:last-child {
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+        }
+
+        dt {
+            margin-bottom: 8px;
+            font-size: .85em;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: .4pt;
+        }
+        
+        dd {
             margin: 0;
-            padding: 12px 20px;
-
-            &:first-child {
-                border-radius: var(--border-radius) var(--border-radius) 0 0;
-            }
-
-            &:last-child {
-                border-radius: 0 0 var(--border-radius) var(--border-radius);
-            }
-
-            dt {
-                margin-bottom: 8px;
-                font-size: .85em;
-                font-weight: 500;
-                text-transform: uppercase;
-                letter-spacing: .4pt;
-            }
-            
-            dd {
-                margin: 0;
-            }
         }
     }
-}
+}

apps/client/src/widgets/react/PropertySheet.tsx

@@ -1,11 +1,23 @@
 import { ComponentChildren } from "preact";
 import clsx from "clsx";
 import "./PropertySheet.css";
+import { FluidWrapper } from "./FluidWrapper";
 
-export function PropertySheet({ className, children }: { className?: string, children: ComponentChildren }) {
-    return <div className={clsx("property-sheet-table", className)}>
-        {children} 
-    </div>
+interface PropertySheetParams {
+    className?: string;
+    children: ComponentChildren;
+    wideLayoutBreakpoint?: number;
+}
+
+export function PropertySheet({ className, children, wideLayoutBreakpoint }: PropertySheetParams) {
+    return <FluidWrapper
+                className="property-sheet-container"
+                breakpoints={{narrow: 0, wide: wideLayoutBreakpoint || 600}}>
+
+        <div className={clsx("property-sheet", className)}>
+            {children} 
+        </div>
+    </FluidWrapper>
 }
 
 export function PropertySheetItem({className, label, children}: {className?: string, label: string, children: ComponentChildren}) {