diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts index 868574a7f2..d69a9e1f21 100644 --- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts +++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts @@ -1363,6 +1363,13 @@ describe('v2 layout invariants (CSS rule presence)', () => { expect(ruleBody(v2, '.v2-connector-row--not-yet .v2-connector-row__glyph')).toContain('color: var(--v2-text-placeholder)'); expect(ruleBody(v2, '.v2-connector-row__detail')).not.toContain('text-overflow'); expect(ruleBody(v2, '.v2-connector-row__detail')).not.toContain('nowrap'); + // Line 1 and the gate's pod name wrap too; the 390 clips were the defect (64144). + expect(ruleBody(v2, '.v2-connector-row__details strong')).not.toContain('text-overflow'); + expect(ruleBody(v2, '.v2-connector-row__details strong')).not.toContain('nowrap'); + expect(ruleBody(v2, '.v2-connector-gate__pod')).not.toContain('text-overflow'); + expect(ruleBody(v2, '.v2-connector-gate__pod')).not.toContain('nowrap'); + expect(ruleBody(v2, '.v2-connector-row__details strong')).toContain('overflow-wrap: anywhere'); + expect(ruleBody(v2, '.v2-connector-gate__pod')).toContain('overflow-wrap: anywhere'); expect(ruleBody(v2, '.v2-connector-row__dot--live, .v2-connector-row__dot--pending')).toContain('var(--v2-accent)'); expect(ruleBody(v2, '.v2-connector-row__dot--idle')).toContain('var(--v2-border-soft)'); expect(ruleBody(v2, '.v2-connector-gate__mark')).toContain('width: 4px'); diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css index e98baac7a2..0c1de4c4f4 100644 --- a/frontend/src/v2/v2.css +++ b/frontend/src/v2/v2.css @@ -9659,7 +9659,8 @@ body.modern-ui.v2-canvas { .v2-connector-row__dot--pulse { animation: none; } } .v2-connector-row__details { display: flex; min-width: 0; flex-direction: column; gap: 2px; color: var(--v2-text-secondary); font-size: 13px; line-height: 18px; } -.v2-connector-row__details strong { overflow: hidden; color: var(--v2-ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } +/* Line 1 wraps like meta does; a sentence never ellipsises at 390 (wren, 64144). */ +.v2-connector-row__details strong { color: var(--v2-ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .v2-connector-row__detail, .v2-connector-row__when { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 12px; line-height: 16px; } /* Meta wraps to a second line; it never ellipsises (lily-shen, 64026). */ .v2-connector-row__detail { overflow-wrap: anywhere; } @@ -9754,7 +9755,8 @@ body.modern-ui.v2-canvas { .v2-connector-gate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; } .v2-root button.v2-connector-gate__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; border: none; background: transparent; color: var(--v2-ink); font: 500 13px/18px var(--v2-font); text-align: left; cursor: pointer; } .v2-connector-gate__mark { width: 4px; height: 4px; flex: none; background: var(--v2-ink); } -.v2-connector-gate__pod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +/* A long pod name wraps under the mark; it never ellipsises (wren, 64144). */ +.v2-connector-gate__pod { min-width: 0; overflow-wrap: anywhere; } .v2-connector-gate__tag { flex: none; color: var(--v2-ink); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; } .v2-connector-gate__since { color: var(--v2-text-tertiary); font-family: var(--v2-font-mono); font-size: 11px; line-height: 16px; white-space: nowrap; } .v2-connector-gate__since--off { color: var(--v2-text-placeholder); }