@ai-ecoverse/slicc-spectrum 1.60.0 → 1.60.1

package/dist/slicc-ui.js

@@ -27457,6 +27457,21 @@ var SliccMonitor = class extends ModelElement {
     shared,
     panelCss,
     i`
+      .bar {
+        padding-block: var(--swc-spacing-50);
+      }
+      .heading {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        column-gap: var(--swc-spacing-100);
+        white-space: normal;
+      }
+      .bar swc-action-button {
+        flex: none;
+      }
       .body {
         flex: 1;
         min-height: 0;
@@ -27606,7 +27621,7 @@ var SliccMonitor = class extends ModelElement {
       }
       .row swc-status-light {
         min-width: 0;
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
       }
       .row .badges {
         grid-column: 2;
@@ -27627,7 +27642,7 @@ var SliccMonitor = class extends ModelElement {
         padding-inline-start: var(--swc-spacing-300);
         color: var(--swc-neutral-subdued-content-color-default);
         font-size: var(--swc-font-size-75);
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
       }
     `
   ];
@@ -27671,7 +27686,7 @@ var SliccMonitor = class extends ModelElement {
   #row(row) {
     const depth = indent2(row.depth);
     return b`<li class="row" data-id=${row.id ?? A} data-status=${row.status} data-depth=${depth || A} style=${depth ? `--depth: ${depth}` : A}>
-      <swc-status-light size="s" variant=${rowLights[row.status]}><span class="sr">${rowSpoken[row.status]}: </span>${row.name}</swc-status-light>
+      <swc-status-light size="s" variant=${rowLights[row.status]}><span class="sr">${rowSpoken[row.status]}: </span>${row.name.split(/(?<=\/)/).map((part2, i25) => i25 ? b`<wbr>${part2}` : part2)}</swc-status-light>
       <span class="badges">${(row.badges ?? []).map((badge) => b`<swc-badge size="s" variant="neutral" subtle>${badge}</swc-badge>`)}</span>
       ${row.meta ? b`<span class="meta">${row.meta}</span>` : A}
     </li>`;
@@ -27703,8 +27718,7 @@ var SliccMonitor = class extends ModelElement {
   render() {
     const snapshot2 = this.model?.monitor.snapshot();
     return b`<div class="bar">
-        <strong>Live monitor</strong><span>${snapshot2 ? `Updated ${new Date(snapshot2.updatedAt).toISOString().slice(11, 19)} UTC` : "No data"}</span>
-        <span class="spacer"></span>
+        <span class="heading"><strong>Live monitor</strong><span>${snapshot2 ? `Updated ${new Date(snapshot2.updatedAt).toISOString().slice(11, 19)} UTC` : "No data"}</span></span>
         <swc-action-button size="s" quiet @click=${() => this.model?.monitor.resync()}><swc-icon-refresh slot="icon"></swc-icon-refresh>Re-sync</swc-action-button>
       </div>
       <div class="body">