fix(app): keep test-tree and action rows on one line inside their panel

packages/app/src/components/sidebar.ts

@@ -21,6 +21,10 @@ export class DevtoolsSidebar extends Element {
         flex-direction: column;
         height: 100%;
         min-height: 0;
+        /* Without this, single-line test names make the automatic minimum
+           width beat the drag handle's flex-basis and the panel outgrows it. */
+        min-width: 0;
+        overflow: hidden;
       }
 
       .top {

packages/app/src/components/sidebar/explorer.ts

@@ -50,6 +50,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   #statusFilter: TestStatus | null = null
   #selectedUid?: string
   #autoSelectedUid?: string
+  #revealedUid?: string
   #filterListener = this.#filterTests.bind(this)
   #statusFilterListener = this.#applyStatusFilter.bind(this)
   #selectListener = this.#handleSelect.bind(this)
@@ -65,6 +66,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         display: flex;
         flex-direction: column;
         min-height: 0;
+        min-width: 0;
         flex: 1 1 auto;
       }
 
@@ -140,7 +142,12 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   }
 
   #handleSelect(event: CustomEvent<string>) {
-    this.#selectedUid = event.detail
+    const uid = event.detail
+    // Only one row shows its full name at a time: clicking a row folds whichever
+    // was open, and clicking the open one folds it. The event is click-only, so
+    // the tree auto-selecting the running test never expands anything.
+    this.#revealedUid = uid === this.#revealedUid ? undefined : uid
+    this.#selectedUid = uid
     this.requestUpdate()
   }
 
@@ -375,6 +382,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         ?has-children="${entry.children && entry.children.length > 0}"
         ?selected="${entry.uid ===
         (this.#selectedUid ?? this.#autoSelectedUid)}"
+        ?revealed="${entry.uid === this.#revealedUid}"
         ?root="${isRoot}"
         .runDisabled=${this.#isRunDisabled(entry)}
         .runDisabledReason=${this.#getRunDisabledReason(entry)}

packages/app/src/components/sidebar/test-suite.ts

@@ -93,6 +93,12 @@ export class ExplorerTestEntry extends CollapseableEntry {
   @property({ type: Boolean, reflect: true })
   selected = false
 
+  /** Whether this row shows its name in full. Owned by the explorer, which keeps
+   *  exactly one row revealed; `selected` can't drive it because the tree
+   *  auto-selects the running test, expanding a row nobody touched. */
+  @property({ type: Boolean, reflect: true })
+  revealed = false
+
   @property({ type: Boolean, reflect: true })
   root = false
 
@@ -110,6 +116,18 @@ export class ExplorerTestEntry extends CollapseableEntry {
         font-size: 12.5px;
         /* matches the icon box height so the icon aligns with the first line */
         line-height: 18px;
+        /* One line per row so every entry in the tree is the same height */
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      /* Clicking a row is the only way to read a name it had to clip. Wrapping
+         anywhere because a name can be one unbroken token (a URL) that plain
+         wrapping would still clip. */
+      :host([revealed]) ::slotted(label) {
+        white-space: normal;
+        overflow-wrap: anywhere;
       }
 
       :host([selected]) .row {
@@ -426,13 +444,13 @@ export class ExplorerTestEntry extends CollapseableEntry {
           ></icon-mdi-menu-down>
         </button>
         <span
-          class="flex items-start shrink flex-nowrap min-w-0 leading-[18px] ${hasNoChildren
+          class="flex items-start flex-nowrap min-w-0 flex-1 leading-[18px] ${hasNoChildren
             ? 'pl-9'
             : ''}"
           @click="${() => this.#selectEntry()}"
         >
           ${this.root ? nothing : this.testStateIcon}
-          <slot name="label" class="mx-2 block flex-initial shrink"></slot>
+          <slot name="label" class="mx-2 block min-w-0 flex-1"></slot>
         </span>
         ${this.#renderToolbar(hasNoChildren)}
       </section>

packages/app/src/components/workbench/action-tree.ts

@@ -21,6 +21,16 @@ export interface CommandRow {
 
 export type ActionTreeRow = GroupRow | CommandRow
 
+/** Identity of a render row. Rows are keyed on it so an expand/collapse moves
+ *  each element with the action it belongs to; reusing whatever element sat at
+ *  that index hands the new action the old row's local state. Namespaced so a
+ *  callId that reads as a number can't collide with a command index. */
+export function rowKey(row: ActionTreeRow): string {
+  return row.kind === 'group'
+    ? `group:${row.group.callId}`
+    : `command:${row.commandIndex}`
+}
+
 /** Command indices anywhere under a group, nested groups included. */
 export function collectCommandIndices(group: TraceActionGroupNode): number[] {
   const indices: number[] = []

packages/app/src/components/workbench/actionItems/command.ts

@@ -50,6 +50,7 @@ export class CommandItem extends ActionItem {
     if (!this.entry) {
       return
     }
+    this.requestReveal()
     window.dispatchEvent(
       // Typed as the contract, which is what makes the two nullable fields below
       // a compile error rather than a blank chip in the Log tab.
@@ -117,10 +118,7 @@ export class CommandItem extends ActionItem {
         @click="${() => this.#highlightLine()}"
       >
         ${this.iconChip(this.#renderIcon(entry.command))}
-        <code
-          class="text-[12.5px] flex-wrap text-left break-all ${this.failed
-            ? 'text-chartsRed'
-            : ''}"
+        <code class="label text-[12.5px] ${this.failed ? 'text-chartsRed' : ''}"
           >${capitalizeAssertLabel(entry.title ?? entry.command)}</code
         >
         ${this.renderTime()}

packages/app/src/components/workbench/actionItems/group.ts

@@ -26,6 +26,7 @@ export class GroupItem extends ActionItem {
   }
 
   #toggle() {
+    this.requestReveal()
     this.dispatchEvent(
       new CustomEvent('group-toggle', {
         detail: { callId: this.group?.callId, expanded: this.expanded },
@@ -51,7 +52,7 @@ export class GroupItem extends ActionItem {
             : ''}"
         ></icon-mdi-chevron-right>
         <span
-          class="text-[12.5px] font-medium text-left break-all ${this.failed
+          class="label text-[12.5px] font-medium ${this.failed
             ? 'text-chartsRed'
             : ''}"
           >${this.group.title}</span

packages/app/src/components/workbench/actionItems/item.ts

@@ -7,6 +7,9 @@ import { formatDuration, durationHeat, type DurationHeat } from './duration.js'
 
 export type ActionEntry = TraceMutation | CommandLog
 
+/** What a row reports as its identity: an action by reference, a group by key. */
+export type RowRevealKey = string | ActionEntry
+
 /** Icon sized to sit inside the `.ic` chip rendered by `iconChip`. */
 export const ICON_CLASS = 'w-[15px] h-[15px] block shrink-0'
 
@@ -33,6 +36,27 @@ export class ActionItem extends Element {
   @property({ type: Boolean, reflect: true })
   failed = false
 
+  /** Whether this row shows its label in full. Owned by the list, which keeps
+   *  exactly one row revealed; `active` can't drive it because the player clock
+   *  marks the action at the playhead, expanding rows nobody touched. */
+  @property({ type: Boolean, reflect: true })
+  revealed = false
+
+  /** Identity this row echoes back on click, for the list to compare. */
+  @property({ attribute: false })
+  revealKey?: RowRevealKey
+
+  /** Click-only by construction, which is what keeps playback out of it. */
+  protected requestReveal() {
+    this.dispatchEvent(
+      new CustomEvent<RowRevealKey | undefined>('row-reveal', {
+        detail: this.revealKey,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   static styles = [
     ...Element.styles,
     css`
@@ -44,6 +68,24 @@ export class ActionItem extends Element {
 
       button {
         position: relative;
+        /* Same height for every row whether or not it carries an icon chip
+           (chip 26px + its 4px margins). */
+        min-height: 34px;
+      }
+
+      /* One line per row; clicking a row is what reflows its full text. */
+      .label {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: left;
+        padding-right: 8px;
+      }
+      :host([revealed]) .label {
+        white-space: normal;
+        overflow-wrap: anywhere;
       }
 
       .ic {
@@ -102,7 +144,7 @@ export class ActionItem extends Element {
     const heatCls = HEAT_CLASS[durationHeat(this.duration)]
     return html`
       <span
-        class="text-[10px] grow-0 shrink rounded-xl ml-auto px-1.5 py-px font-medium ${heatCls}"
+        class="text-[10px] flex-none whitespace-nowrap rounded-xl ml-auto px-1.5 py-px font-medium ${heatCls}"
         >${formatDuration(this.duration)}</span
       >
     `

packages/app/src/components/workbench/actionItems/mutation.ts

@@ -28,7 +28,7 @@ export class MutationItem extends ActionItem {
       ${this.iconChip(
         html`<icon-mdi-pencil class="${ICON_CLASS}"></icon-mdi-pencil>`
       )}
-      <span class="flex-grow text-left"
+      <span class="label"
         >element attribute "<code>${mutation.attributeName}</code>"
         changed</span
       >
@@ -42,7 +42,7 @@ export class MutationItem extends ActionItem {
         ${this.iconChip(
           html`<icon-mdi-document class="${ICON_CLASS}"></icon-mdi-document>`
         )}
-        <span class="flex-grow text-left">Document loaded</span>
+        <span class="label">Document loaded</span>
         ${this.renderTime()}
       `
     }
@@ -52,7 +52,7 @@ export class MutationItem extends ActionItem {
           class="${ICON_CLASS}"
         ></icon-mdi-family-tree>`
       )}
-      <span class="flex-grow text-left">
+      <span class="label">
         ${this.#renderNodeAmount(mutation.addedNodes, 'added')}
         ${mutation.addedNodes.length && mutation.removedNodes.length
           ? ' and '
@@ -78,6 +78,7 @@ export class MutationItem extends ActionItem {
   }
 
   #selectMutation() {
+    this.requestReveal()
     const event = new CustomEvent('app-mutation-select', { detail: this.entry })
     window.dispatchEvent(event)
     this.requestUpdate()