Added recursion to Properties.py

src/myfasthtml/assets/myfasthtml.css

@@ -697,23 +697,30 @@
 /* ************* Properties Component ************ */
 /* *********************************************** */
 
-/* Properties container */
+/*!* Properties container *!*/
 .mf-properties {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-/* Group card - using DaisyUI card styling */
+/*!* Group card - using DaisyUI card styling *!*/
 .mf-properties-group-card {
     background-color: var(--color-base-100);
     border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
     border-radius: var(--radius-md);
-    overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    overflow: auto;
 }
 
-/* Group header - gradient using DaisyUI primary color */
+.mf-properties-group-container {
+    display: inline-block; /* important */
+    min-width: max-content; /* important */
+    width: 100%;
+}
+
+
+/*!* Group header - gradient using DaisyUI primary color *!*/
 .mf-properties-group-header {
     background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);
     color: var(--color-primary-content);
@@ -722,20 +729,24 @@
     font-size: var(--properties-font-size);
 }
 
-/* Group content area */
+/*!* Group content area *!*/
 .mf-properties-group-content {
     display: flex;
     flex-direction: column;
+    min-width: max-content;
 }
 
-/* Property row */
+/*!* Property row *!*/
 .mf-properties-row {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 6rem 1fr;
+
     align-items: center;
     padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);
+
     border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
     transition: background-color 0.15s ease;
+
     gap: calc(var(--properties-font-size) * 0.75);
 }
 
@@ -747,20 +758,24 @@
     background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
 }
 
-/* Property key - normal font */
+/*!* Property key - normal font *!*/
 .mf-properties-key {
+    align-items: start;
     font-weight: 600;
     color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
     flex: 0 0 40%;
     font-size: var(--properties-font-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-/* Property value - monospace font */
+/*!* Property value - monospace font *!*/
 .mf-properties-value {
     font-family: var(--default-mono-font-family);
     color: var(--color-base-content);
     flex: 1;
-    text-align: right;
+    text-align: left;
     font-size: var(--properties-font-size);
     overflow: hidden;
     text-overflow: ellipsis;