prevent nested selection; css polish
3clyp50 committed
Jan 27, 2026 at 22:07 UTC
dcaf1331068061bed81a68de2a717a50bf67e61e
3 files changed
+24
-32
webui/components/messages/action-buttons/simple-action-buttons.css
+9
-4
@@ -59,20 +59,25 @@
59
width: 100%;
60
}
61
62
+.code-block-wrapper > .step-action-buttons,
63
+.message-markdown-table-wrap > .step-action-buttons {
64
+ padding-top: 0;
65
+}
66
+
67
/* ===========================================
68
Hover behavior - Pointer devices
69
=========================================== */
70
66
-.device-pointer .message-user:hover .step-action-buttons,
67
-.device-pointer .message-agent-response:hover .step-action-buttons,
71
+.device-pointer .message-user:hover > .step-action-buttons,
72
+.device-pointer .message-agent-response:hover > .step-action-buttons,
73
.device-pointer .process-step:hover > .process-step-detail .step-action-buttons {
74
opacity: 1;
75
pointer-events: auto;
76
}
77
78
/* Code blocks and tables: show copy button on hover */
74
-.device-pointer .code-block-wrapper:hover .step-action-buttons,
75
-.device-pointer .message-markdown-table-wrap:hover .step-action-buttons {
79
+.device-pointer .code-block-wrapper:hover > .step-action-buttons,
80
+.device-pointer .message-markdown-table-wrap:hover > .step-action-buttons {
81
opacity: 1;
82
pointer-events: auto;
83
}
webui/css/messages.css
-17
@@ -732,23 +732,6 @@
732
border-radius: 0.3em;
733
}
734
735
-/* Code block and table copy buttons */
736
-.code-block-wrapper,
737
-.message-markdown-table-wrap {
738
- position: relative;
739
-}
740
-
741
-.overlay-actions {
742
- position: absolute;
743
- top: 0;
744
- right: 0;
745
- background: var(--color-panel);
746
- border-radius: var(--border-radius-sm);
747
- z-index: 1;
748
- padding: 2px !important;
749
- gap: 0 !important;
750
-}
751
-
735
.msg-content hr {
736
border: 0;
737
border-top: 1px solid var(--color-border);
webui/js/messages.js
+15
-11
@@ -671,7 +671,7 @@ function drawStandaloneMessage({
671
// Render action buttons: get/create container, clear, append
672
const actionButtonsContainer = ensureChild(
673
messageDiv,
674
- ".step-action-buttons",
674
+ ":scope > .step-action-buttons",
675
"div",
676
"step-action-buttons",
677
);
@@ -975,9 +975,10 @@ export function drawMessageResponse({
975
createActionButton("copy", "", () => copyToClipboard(responseText)),
976
].filter(Boolean)
977
: [];
978
+ // Look for direct child only to avoid finding nested code block buttons
979
const actionButtonsContainer = ensureChild(
980
messageDiv,
980
- ".step-action-buttons",
981
+ ":scope > .step-action-buttons",
982
"div",
983
"step-action-buttons",
984
);
@@ -1114,9 +1115,10 @@ export function drawMessageUser({
1115
createActionButton("copy", "", () => copyToClipboard(userText)),
1116
].filter(Boolean)
1117
: [];
1118
+ // Look for direct child only to avoid finding nested code block buttons
1119
const actionButtonsContainer = ensureChild(
1120
messageDiv,
1119
- ".step-action-buttons",
1121
+ ":scope > .step-action-buttons",
1122
"div",
1123
"step-action-buttons",
1124
);
@@ -1909,11 +1911,12 @@ function adjustMarkdownRender(element) {
1911
const tables = element.querySelectorAll("table");
1912
tables.forEach((el) => {
1913
const wrapper = wrapElement(el, "message-markdown-table-wrap");
1912
- const copyBtn = createActionButton("copy", "", () =>
1913
- copyToClipboard(extractTableTSV(el))
1914
+ const actionsDiv = document.createElement("div");
1915
+ actionsDiv.className = "step-action-buttons";
1916
+ actionsDiv.appendChild(
1917
+ createActionButton("copy", "", () => copyToClipboard(extractTableTSV(el)))
1918
);
1915
- copyBtn.classList.add("step-action-buttons", "overlay-actions");
1916
- wrapper.appendChild(copyBtn);
1919
+ wrapper.appendChild(actionsDiv);
1920
});
1921
1922
// find all code blocks
@@ -1921,11 +1924,12 @@ function adjustMarkdownRender(element) {
1924
codeElements.forEach((code) => {
1925
const pre = code.parentNode;
1926
const wrapper = wrapElement(pre, "code-block-wrapper");
1924
- const copyBtn = createActionButton("copy", "", () =>
1925
- copyToClipboard(code.textContent)
1927
+ const actionsDiv = document.createElement("div");
1928
+ actionsDiv.className = "step-action-buttons";
1929
+ actionsDiv.appendChild(
1930
+ createActionButton("copy", "", () => copyToClipboard(code.textContent))
1931
);
1927
- copyBtn.classList.add("step-action-buttons", "overlay-actions");
1928
- wrapper.appendChild(copyBtn);
1932
+ wrapper.appendChild(actionsDiv);
1933
});
1934
1935
// find all images