From 489d442dc4b16400b69970a599538177c0e447be Mon Sep 17 00:00:00 2001 From: Volodymyr Makukha Date: Fri, 24 Jul 2026 15:38:33 +0100 Subject: [PATCH 1/2] Agentic UI: fix copy button space in chat --- .../session-view/conversation/style.module.css | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css b/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css index 9304053204..49c96cf5b4 100644 --- a/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css +++ b/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css @@ -686,22 +686,33 @@ } /* Assistant response wrapper: the copy button stays hidden until the turn is - hovered (or a control inside it is focused). */ + hovered (or a control inside it is focused). It is absolutely positioned in + the spacing below the message so it takes no layout space and leaves no gap + between conversation blocks. */ .assistantTurn { + position: relative; display: flex; flex-direction: column; - gap: var(--wpds-dimension-padding-xs); } .messageActions { + position: absolute; + /* Flush with the turn's bottom edge, with the visual offset as padding so + the pointer never crosses a dead zone that would drop :hover en route to + the button. */ + inset-block-start: 100%; + padding-block-start: var(--wpds-dimension-padding-xs); + inset-inline-start: calc((16px - 1.75rem) / 2); + inset-inline-end: 0; display: flex; align-items: center; - margin-inline-start: calc((16px - 1.75rem) / 2); opacity: 0; + pointer-events: none; transition: opacity 0.12s ease; } .assistantTurn:hover .messageActions, .assistantTurn:focus-within .messageActions { opacity: 1; + pointer-events: auto; } From ddef58d5e5515d5860704fd0de37c522af560b4f Mon Sep 17 00:00:00 2001 From: Volodymyr Makukha Date: Mon, 27 Jul 2026 18:03:49 +0100 Subject: [PATCH 2/2] Address feddback --- .../conversation/style.module.css | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css b/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css index 49c96cf5b4..ec727e3ba9 100644 --- a/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css +++ b/apps/ui/src/ui-classic/components/session-view/conversation/style.module.css @@ -4,17 +4,16 @@ gap: var(--wpds-dimension-padding-lg); } -/* User bubbles act as turn anchors; give them generous breathing room above - and below so the user's prompt stands apart from the assistant response. */ +/* User bubbles act as turn anchors. No top padding — the space above comes + from the preceding turn's in-flow copy-button line plus the root gap. The + bottom padding mirrors that copy line's height (1.75rem, keep in sync with + the copy-button size) so every turn is followed by the same amount of + space. */ .userTurn { display: flex; flex-direction: column; margin-right: calc(-1 * var(--classic-composer-shell-inline-padding)); - padding: var(--wpds-dimension-padding-xl) 0; -} - -.userTurn:first-child { - padding-top: 0; + padding: 0 0 1.75rem; } .userAttachments { @@ -686,33 +685,22 @@ } /* Assistant response wrapper: the copy button stays hidden until the turn is - hovered (or a control inside it is focused). It is absolutely positioned in - the spacing below the message so it takes no layout space and leaves no gap - between conversation blocks. */ + hovered (or a control inside it is focused). */ .assistantTurn { - position: relative; display: flex; flex-direction: column; + gap: var(--wpds-dimension-padding-xs); } .messageActions { - position: absolute; - /* Flush with the turn's bottom edge, with the visual offset as padding so - the pointer never crosses a dead zone that would drop :hover en route to - the button. */ - inset-block-start: 100%; - padding-block-start: var(--wpds-dimension-padding-xs); - inset-inline-start: calc((16px - 1.75rem) / 2); - inset-inline-end: 0; display: flex; align-items: center; + margin-inline-start: calc((16px - 1.75rem) / 2); opacity: 0; - pointer-events: none; transition: opacity 0.12s ease; } .assistantTurn:hover .messageActions, .assistantTurn:focus-within .messageActions { opacity: 1; - pointer-events: auto; }