0.2.63 update

admin-ui/src/styles.css

@@ -744,9 +744,9 @@ a {
   background: var(--surface);
 }
 .tile .glyph {
-  /* Tiles keep their figures left-aligned for quick scanning, but the visual glyph is a
-     standalone marker and follows the centred treatment used by glyph plates elsewhere. */
-  margin: 0 auto 9px;
+  /* Summary cards share tile padding, so their marker always starts at the same top-left
+     inset. The SVG itself remains centred by .glyph's grid treatment. */
+  margin: 0 0 9px;
 }
 .tile b {
   display: block;
@@ -1442,6 +1442,22 @@ select {
   background: #080a0e;
   font: 12px/1.6 var(--mono);
 }
+.loghead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: max-content 46px minmax(180px, 1fr) minmax(240px, 2fr);
+  gap: 12px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--line);
+  background: #10131a;
+  color: var(--quiet);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
 .logline {
   display: flex;
   gap: 12px;
@@ -1457,6 +1473,11 @@ select {
   flex: 0 0 auto;
   color: var(--quiet);
 }
+.logline time small {
+  display: block;
+  color: var(--muted);
+  font-size: 10px;
+}
 .logline .lvl {
   flex: 0 0 46px;
   font-weight: 700;
@@ -1480,10 +1501,44 @@ select {
 .logline .attrs {
   color: var(--quiet);
 }
+@media (min-width: 900px) {
+  .logline {
+    display: grid;
+    grid-template-columns: max-content 46px minmax(180px, 1fr) minmax(240px, 2fr);
+  }
+}
 .logline .attrs b {
   color: var(--muted);
   font-weight: 400;
 }
+.logdetails {
+  min-width: 0;
+}
+.logdetails summary {
+  cursor: pointer;
+  list-style: none;
+  overflow-wrap: anywhere;
+}
+.logdetails summary::-webkit-details-marker { display: none; }
+.logdetails summary::before {
+  content: '›';
+  display: inline-block;
+  margin-right: 6px;
+  color: var(--accent);
+}
+.logdetails[open] summary::before { transform: rotate(90deg); }
+.logdetails dl {
+  display: grid;
+  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
+  gap: 4px 12px;
+  margin: 7px 0 2px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, .025);
+}
+.logdetails dt { color: var(--muted); }
+.logdetails dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
 
 pre.code {
   margin: 0;