final dev

frontend/src/styles/app.css

@@ -2900,32 +2900,46 @@ body {
 .runtime-activity-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.9rem;
+  gap: 0.75rem;
 }
 
 .runtime-activity-col {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
+  border: 1px solid var(--rip-border);
+  border-radius: 0.5rem;
+  padding: 0.55rem 0.6rem;
+  background: var(--rip-panel-soft);
+  display: grid;
+  align-content: start;
+  grid-auto-rows: min-content;
+  gap: 0.45rem;
+}
+
+.runtime-activity-col h4 {
+  margin: 0;
 }
 
 .runtime-activity-list {
   display: flex;
   flex-direction: column;
-  gap: 0.55rem;
+  gap: 0.45rem;
 }
 
 .runtime-activity-item {
-  border: 1px solid var(--surface-border, #d8d3c6);
-  border-radius: 8px;
-  padding: 0.6rem 0.75rem;
-  background: var(--surface-card, #f8f6ef);
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  border: 1px dashed var(--rip-border);
+  border-radius: 0.45rem;
+  padding: 0.45rem 0.55rem;
+  background: var(--rip-panel);
+  display: grid;
+  gap: 0.2rem;
+}
+
+.runtime-activity-item.running {
+  border-style: solid;
 }
 
 .runtime-activity-item.done {
+  border-style: dotted;
+  background: var(--rip-surface);
   opacity: 0.94;
 }
 
@@ -2936,6 +2950,13 @@ body {
   gap: 0.5rem;
 }
 
+.runtime-activity-head strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .runtime-activity-tags {
   display: flex;
   flex-wrap: wrap;
@@ -2946,7 +2967,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   gap: 0.45rem;
-  margin-top: 0.25rem;
+  margin-top: 0.15rem;
 }
 
 .runtime-activity-details {