salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): mirror delete hover overlay in timeline

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-25 23:32:32 +00:00
parent 1122070b9c
commit 0f9c99e3bd
8 changed files with 176 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/styles/messaging/delete-overlays.css
View File

@@ -10,7 +10,7 @@
inset: -2px;
background: var(--status-error-bg);
box-shadow: inset 0 0 0 1px var(--status-error-fg);
border-radius: 10px;
border-radius: 0;
pointer-events: none;
/* Overlay must sit above the message cards (they have opaque backgrounds). */
z-index: 10;
@@ -30,7 +30,7 @@
inset: -2px;
background: var(--status-error-bg);
box-shadow: inset 0 0 0 1px var(--status-error-fg);
border-radius: 10px;
border-radius: 0;
pointer-events: none;
/* Overlay must sit above the part card background. */
z-index: 10;

31
packages/ui/src/styles/messaging/message-timeline.css
View File

@@ -87,6 +87,7 @@
border-radius: 0;
border: 1px solid var(--border-base);
background-color: var(--surface-secondary);
position: relative;
display: flex;
align-items: center;
justify-content: center;
@@ -98,6 +99,36 @@
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.message-timeline-segment[data-delete-hover="true"]::before {
content: "";
position: absolute;
inset: 0;
background: var(--status-error-bg);
box-shadow: inset 0 0 0 1px var(--status-error-fg);
border-radius: 0;
pointer-events: none;
z-index: 2;
}
/* Ensure delete hover is visible even on the active segment styling. */
.message-timeline-segment[data-delete-hover="true"],
.message-timeline-segment[data-delete-hover="true"]:hover,
.message-timeline-segment[data-delete-hover="true"]:focus-visible,
.message-timeline-segment-active[data-delete-hover="true"],
.message-timeline-segment-active[data-delete-hover="true"]:hover,
.message-timeline-segment-active[data-delete-hover="true"]:focus-visible {
/* Let the ::before overlay provide the highlight (matches stream behavior). */
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
.message-timeline-label {
position: relative;
z-index: 3;
}
.message-timeline-segment.message-timeline-segment-hidden {
display: none !important;
}