changes to jobs trey

client/jobs.js

@@ -319,18 +319,23 @@ export function renderJobPanel(host, job) {
 
   const stepsHtml = job.steps
     .map((s) => {
-      const icon =
-        s.status === 'success'
-          ? 'fa-check-circle text-success'
-          : s.status === 'error'
-            ? 'fa-times-circle text-danger'
-            : s.status === 'active'
-              ? 'fa-spinner fa-spin text-primary'
+      let iconHtml
+      if (s.status === 'active') {
+        iconHtml =
+          '<span class="job-spinner" role="status" aria-label="In progress"><span class="job-spinner-ring"></span></span>'
+      } else {
+        const icon =
+          s.status === 'success'
+            ? 'fa-check-circle text-success'
+            : s.status === 'error'
+              ? 'fa-times-circle text-danger'
               : s.status === 'skipped'
                 ? 'fa-minus-circle text-muted'
                 : 'fa-circle text-muted'
+        iconHtml = `<i class="fas ${icon}" aria-hidden="true"></i>`
+      }
       return `<div class="job-step job-step--${s.status}">
-        <i class="fas ${icon}"></i>
+        <span class="job-step-icon">${iconHtml}</span>
         <span class="job-step-label">${escapeHtml(s.label)}</span>
         ${s.error ? `<span class="job-step-error">${escapeHtml(s.error)}</span>` : ''}
         ${s.detail ? `<span class="job-step-detail text-muted">${escapeHtml(s.detail)}</span>` : ''}

ui/ops.css

@@ -223,33 +223,124 @@
   border: 1px solid #334155;
   border-radius: 12px;
   padding: 1rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
 }
 .job-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
+  min-width: 0;
+}
+.job-panel-header > strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.3;
+}
+.job-steps {
+  min-width: 0;
+  max-width: 100%;
 }
 .job-step {
   display: grid;
-  grid-template-columns: 1.25rem 1fr;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
   gap: 0.5rem 0.65rem;
   padding: 0.35rem 0;
   font-size: 0.9rem;
+  min-width: 0;
+  align-items: start;
+}
+.job-step-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.job-step-icon > .fas {
+  font-size: 0.95rem;
+}
+.job-step-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .job-step-error {
   grid-column: 2;
   color: #f87171;
   font-size: 0.8rem;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
   line-height: 1.35;
   max-height: 6rem;
+  overflow-x: hidden;
   overflow-y: auto;
+  min-width: 0;
+}
+.job-step-detail {
+  grid-column: 2;
+  font-size: 0.8rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Custom in-tray spinner (replaces FA fa-spinner) */
+.job-spinner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.job-spinner-ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2px solid rgba(45, 212, 191, 0.18);
+  border-top-color: var(--pd-accent-primary, #2dd4bf);
+  border-right-color: rgba(45, 212, 191, 0.55);
+  animation: job-spinner-rotate 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+  box-shadow: 0 0 8px rgba(45, 212, 191, 0.25);
+}
+.job-spinner::after {
+  content: '';
+  position: absolute;
+  width: 0.28rem;
+  height: 0.28rem;
+  border-radius: 50%;
+  background: var(--pd-accent-primary, #2dd4bf);
+  opacity: 0.85;
+  box-shadow: 0 0 6px rgba(45, 212, 191, 0.55);
+}
+@keyframes job-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .job-spinner-ring {
+    animation-duration: 1.4s;
+  }
+}
+.job-log-details {
+  margin-top: 0.75rem;
+  min-width: 0;
+  max-width: 100%;
 }
-.job-step-detail { grid-column: 2; font-size: 0.8rem; }
-.job-log-details { margin-top: 0.75rem; }
 .job-log-details > summary {
   display: flex;
   align-items: center;
@@ -260,6 +351,13 @@
   user-select: none;
   color: var(--text-secondary, #c8d1df);
   font-size: 0.85rem;
+  min-width: 0;
+}
+.job-log-details > summary > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .job-log-details > summary::-webkit-details-marker { display: none; }
 .job-log-follow-hint {
@@ -270,12 +368,14 @@
   align-items: center;
   gap: 0.3rem;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 .job-log-follow-hint.is-paused {
   color: #fbbf24;
 }
 .job-log {
   max-height: 14rem;
+  max-width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   background: #020617;
@@ -286,13 +386,16 @@
   margin-top: 0.35rem;
   scroll-behavior: auto;
   overscroll-behavior: contain;
+  box-sizing: border-box;
 }
 .job-log-line {
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
   color: #cbd5e1;
   line-height: 1.35;
   padding: 1px 0;
+  max-width: 100%;
 }
 .job-log-line:last-child {
   /* Keep latest line comfortable when following */
@@ -443,9 +546,13 @@ kbd {
   right: 1rem;
   bottom: 1rem;
   width: min(28rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
   z-index: 2500;
   max-height: 60vh;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  box-sizing: border-box;
   pointer-events: none;
   opacity: 0;
   transform: translateY(12px) scale(0.98);
@@ -486,6 +593,8 @@ kbd {
   display: flex;
   align-items: center;
   gap: 0.45rem;
+  flex-shrink: 0;
+  min-width: 0;
 }
 
 .job-auto-dismiss-hint {