feat(workbench): keep progress detail return context

web/src/assets/styles/components/personal-workbench-responsive.css

@@ -96,7 +96,7 @@
   }
 
   .progress-row {
-    grid-template-columns: minmax(72px, 0.42fr) minmax(126px, 0.86fr) minmax(270px, 1.32fr) minmax(86px, auto);
+    grid-template-columns: minmax(72px, 0.4fr) minmax(122px, 0.72fr) minmax(78px, 0.42fr) minmax(238px, 1.18fr) minmax(86px, auto);
     gap: 12px;
   }
 }
@@ -328,6 +328,7 @@
     grid-template-columns: minmax(70px, auto) 1fr minmax(74px, auto);
     grid-template-areas:
       "time identity result"
+      "type type type"
       "steps steps steps";
     gap: 8px;
     padding: 10px 0;
@@ -356,6 +357,11 @@
     font-size: 11px;
   }
 
+  .progress-type {
+    grid-area: type;
+    width: 100%;
+  }
+
   .progress-result {
     grid-area: result;
     width: 100%;

web/src/assets/styles/components/personal-workbench.css

@@ -525,6 +525,38 @@
   white-space: nowrap;
 }
 
+.progress-type {
+  min-width: 0;
+  display: grid;
+  justify-items: start;
+  gap: 3px;
+}
+
+.progress-type small {
+  color: var(--workbench-muted);
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.progress-type strong {
+  max-width: 100%;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
+  border-radius: 4px;
+  background: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08);
+  color: var(--workbench-primary-active);
+  font-size: 11.5px;
+  font-weight: 850;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .progress-status {
   display: inline-flex;
   align-items: center;
@@ -555,7 +587,7 @@
 .progress-row {
   position: relative;
   display: grid;
-  grid-template-columns: minmax(78px, 0.44fr) minmax(138px, 0.86fr) minmax(300px, 1.46fr) minmax(92px, auto);
+  grid-template-columns: minmax(78px, 0.42fr) minmax(132px, 0.74fr) minmax(84px, 0.42fr) minmax(260px, 1.28fr) minmax(92px, auto);
   align-items: center;
   gap: 12px;
   width: 100%;
@@ -605,6 +637,7 @@
 
 .progress-time,
 .progress-identity,
+.progress-type,
 .progress-result {
   min-width: 0;
   display: grid;