diff --git a/packages/wc/components/presentation/wc.ts b/packages/wc/components/presentation/wc.ts index 7037730..74ee2ac 100644 --- a/packages/wc/components/presentation/wc.ts +++ b/packages/wc/components/presentation/wc.ts @@ -460,10 +460,25 @@ export class PresentationWC extends LitElement { gap: ${dimension("space.md")}; padding: 0 ${dimension("space.md")}; min-width: 0; + position: relative; } - .chrome-group + .chrome-group { - border-left: 1px solid ${color("highlight.med")}; + /* Inset section-break rule rather than a full-height border. A + top-to-bottom border on a tall content strip reads as the edge + of a control (a tall button or a bordered cell), not as a + group separator. Shortening the rule to the middle ~50% of the + chrome lets it read as editorial punctuation, the visual + equivalent of the middot the colophon and marquee use to + separate items. */ + .chrome-group + .chrome-group::before { + content: ""; + position: absolute; + left: 0; + top: 25%; + bottom: 25%; + width: 1px; + background-color: ${color("highlight.med")}; + pointer-events: none; } .chrome-group.time {