diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.css b/examples/chat/angular/src/app/shell/demo-shell.component.css index 26d5b327f..424c1f54a 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.css +++ b/examples/chat/angular/src/app/shell/demo-shell.component.css @@ -64,7 +64,19 @@ font-family: inherit; font-size: var(--ngaf-chat-font-size-sm); box-sizing: border-box; - overflow-x: auto; + /* Toolbar establishes its own stacking context so the chat-select + * dropdown menus (z-index 10 inside the primitive) render above the + * chat content's scroll/transform stacking contexts below. */ + position: relative; + z-index: 50; + /* overflow-x: auto would clip absolutely-positioned dropdown menus. + * Skip it — the toolbar fits on reasonable viewports and the per-field + * dropdowns hold the long labels via the chat-select popover. */ +} + +/* Push every field after Mode to the right of the toolbar. */ +.demo-shell__field--first { + margin-left: auto; } .demo-shell__segmented { @@ -78,8 +90,7 @@ flex: 0 0 auto; } -.demo-shell__segmented-button, -.demo-shell__toolbar-action { +.demo-shell__segmented-button { font: inherit; color: var(--ngaf-chat-text); } @@ -106,21 +117,6 @@ flex: 0 0 auto; } -.demo-shell__toolbar-action { - border: 0; - background: var(--ngaf-chat-surface-alt); - color: var(--ngaf-chat-text); - border-radius: 8px; - padding: 8px 12px; - min-height: 32px; - cursor: pointer; - flex: 0 0 auto; -} - -.demo-shell__toolbar-action:hover { - background: color-mix(in srgb, var(--ngaf-chat-text) 8%, var(--ngaf-chat-surface-alt)); -} - .demo-shell__segmented-button:hover:not(.is-active) { background: color-mix(in srgb, var(--ngaf-chat-text) 8%, transparent); } diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.html b/examples/chat/angular/src/app/shell/demo-shell.component.html index 1d10f243d..fd5264092 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.html +++ b/examples/chat/angular/src/app/shell/demo-shell.component.html @@ -75,49 +75,41 @@ } -