diff --git a/packages/ui/src/components/session-review.css b/packages/ui/src/components/session-review.css index 20d2fef15..363343f91 100644 --- a/packages/ui/src/components/session-review.css +++ b/packages/ui/src/components/session-review.css @@ -44,10 +44,11 @@ [data-component="sticky-accordion-header"] { top: 40px; + } - &[data-expanded]::before { - top: -40px; - } + [data-component="sticky-accordion-header"][data-expanded]::before, + [data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before { + top: -40px; } [data-slot="accordion-trigger"] { @@ -79,6 +80,7 @@ [data-slot="session-review-accordion-content"] { position: relative; + z-index: 0; overflow: hidden; } @@ -211,7 +213,9 @@ [data-slot="session-review-diff-wrapper"] { position: relative; overflow: hidden; + z-index: 0; --line-comment-z: 5; --line-comment-popover-z: 30; + --line-comment-open-z: 6; } } diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index 82b57d13d..840fde05f 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -409,10 +409,11 @@ [data-component="sticky-accordion-header"] { top: var(--sticky-header-height, 0px); + } - &[data-expanded]::before { - top: calc(-1 * var(--sticky-header-height, 0px)); - } + [data-component="sticky-accordion-header"][data-expanded]::before, + [data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before { + top: calc(-1 * var(--sticky-header-height, 0px)); } [data-slot="session-turn-accordion-trigger-content"] { diff --git a/packages/ui/src/components/sticky-accordion-header.css b/packages/ui/src/components/sticky-accordion-header.css index 0fbc354fb..bee8ea78f 100644 --- a/packages/ui/src/components/sticky-accordion-header.css +++ b/packages/ui/src/components/sticky-accordion-header.css @@ -1,16 +1,18 @@ [data-component="sticky-accordion-header"] { position: sticky; top: 0px; - - &[data-expanded] { - z-index: 10; - - &::before { - content: ""; - z-index: -10; - position: absolute; - inset: 0; - background-color: var(--background-stronger); - } - } +} + +[data-component="sticky-accordion-header"][data-expanded], +[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"] { + z-index: 10; +} + +[data-component="sticky-accordion-header"][data-expanded]::before, +[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before { + content: ""; + z-index: -10; + position: absolute; + inset: 0; + background-color: var(--background-stronger); }