Event log

tutorials/device-dashboard/web_root/style.css

@@ -265,18 +265,19 @@ body {
 .field {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   gap: 0.75rem;
 }
 
 .field-label {
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   font-weight: 700;
-  letter-spacing: 0.05em;
   text-transform: uppercase;
   color: #94a3b8;
-  width: 4.5rem;
   flex-shrink: 0;
+  white-space: nowrap;
+  min-width: 6rem;
 }
 
 .field-input {
@@ -419,6 +420,35 @@ body {
   flex-shrink: 0;
 }
 
+.file-content {
+  width: 100%;
+  min-height: calc(100vh - 7rem);
+  margin-top: 0.5rem;
+  padding: 1rem 1.15rem;
+  overflow: auto;
+  color: #dbeafe;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.98)),
+    #0f172a;
+  border: 1px solid rgba(51, 65, 85, 0.9);
+  border-radius: 1rem;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 2px 6px rgba(15, 23, 42, 0.1),
+    0 12px 32px rgba(15, 23, 42, 0.14);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  tab-size: 2;
+}
+
+.file-content:empty::before {
+  content: "Waiting for events...";
+  color: #64748b;
+}
+
 /* Chart */
 
 .chart-panel {