From 5539c901feead2deef1ae865d2d29fcb965f9b1a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 18 Apr 2026 10:20:30 +0300
Subject: [PATCH] style/about dialog: make the property sheet responsive

---
 apps/client/src/widgets/dialogs/about.css | 88 +++++++++++++++++------
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/about.css b/apps/client/src/widgets/dialogs/about.css
index 54f0a8a4b9..8ccec8cc35 100644
--- a/apps/client/src/widgets/dialogs/about.css
+++ b/apps/client/src/widgets/dialogs/about.css
@@ -173,37 +173,81 @@
 
 /* TODO: move to global styles */
 .property-sheet-table {
-    display: table;
-    border-spacing: 0 2px;
-    border-collapse: separate;
+    --border-radius: 8px;
 
     dl {
-        display: table-row;
-        --_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));
+        dt {
+            color: var(--muted-text-color);
         }
     }
+}
 
-    dt, dd {
-        display: table-cell;
-        padding: 10px 16px;
-        vertical-align: top;
+@media (min-width: 600px) {
+    .property-sheet-table {
+        display: table;
+        border-spacing: 0 2px;
+        border-collapse: separate;
+
+        dl {
+            display: table-row;
+            --_br: var(--border-radius);
+            
+            &: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));
+            }
+        }
+
+        dt, dd {
+            display: table-cell;
+            padding: 10px 16px;
+            vertical-align: top;
+        }
+
+        dt {
+            white-space: nowrap;
+        }
+
+        dl {
+            width: 100%;
     }
-
-    dt {
-        white-space: nowrap;
-        color: var(--muted-text-color);
     }
+}
 
-    dl {
-        width: 100%;
+@media (max-width: 599px) {
+    .property-sheet-table {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        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;
+            }
+        }
     }
 }
\ No newline at end of file