mirrors/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-11-14 12:10:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): keep stuck timeline headers out of the title fade (#52639)

Browse Source
This commit is contained in:
Luke Parker
2026-10-02 12:59:37 +10:00
committed by GitHub
Unverified
parent 4c0d0ff478
commit b47d8db9bc
3 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/e2e/regression/patch-sticky-header.spec.ts
+6 -3
View File
@@ -220,13 +220,16 @@ for (const scenario of scenarios) {
const top = sessionTop + (group?.getBoundingClientRect().height ?? 0)
const rect = element.getBoundingClientRect()
const trigger = element.querySelector("button")!
// The header stuck directly below the session title sits where the title's fade starts.
const hits = (target: Element, box: DOMRect) =>
[box.top + 1, box.top + box.height / 2].every((y) =>
target.contains(document.elementFromPoint(box.left + box.width / 2, y)),
)
return {
gap: Math.abs(rect.top - top - (toolTitle?.getBoundingClientRect().height ?? 0)),
groupGap: group ? Math.abs(group.getBoundingClientRect().top - sessionTop) : 0,
titleGap: toolTitle ? Math.abs(toolTitle.getBoundingClientRect().top - top) : 0,
clickable: trigger.contains(
document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2),
),
clickable: hits(trigger, rect) && (!group || hits(group, group.getBoundingClientRect())),
}
}),
)
packages/app/src/session/session-identity-header.tsx
+11 -6
View File
@@ -30,12 +30,17 @@ import "./session-identity-header.css"
export function SessionTitleHeader(props: ParentProps) {
return (
<div
data-session-title
class="sticky top-0 z-30 w-full bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)] pb-4 pe-3 ps-2.5"
>
{props.children}
</div>
<>
{/* The bottom inset reserves room for the fade without covering rows stuck below the bar. */}
<div data-session-title class="pointer-events-none sticky top-0 z-30 w-full pb-4">
<div class="pointer-events-auto bg-v2-background-bg-base pe-3 ps-2.5">{props.children}</div>
</div>
{/* Stuck timeline headers stack above this fade, so it only fades content scrolling under the bar. */}
<div
aria-hidden="true"
class="pointer-events-none sticky top-12 z-[5] -mt-4 h-4 w-full bg-[linear-gradient(to_bottom,var(--v2-background-bg-base),transparent)]"
/>
</>
)
}
packages/session-ui/src/tools/tool-group.stories.tsx
+6 -3
View File
@@ -168,11 +168,14 @@ export const StickyHeader = {
class="relative w-full max-w-[1030px] overflow-y-auto bg-v2-background-bg-base"
style={{ height: `${args.height}px`, "--sticky-accordion-top": "48px" }}
>
<div class="sticky top-0 z-30 w-full bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)] pb-4 pe-3 ps-2.5">
<div class="flex h-12 items-center px-1 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base">
Trace stacked review history
<div class="pointer-events-none sticky top-0 z-30 w-full pb-4">
<div class="pointer-events-auto bg-v2-background-bg-base pe-3 ps-2.5">
<div class="flex h-12 items-center px-1 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base">
Trace stacked review history
</div>
</div>
</div>
<div class="pointer-events-none sticky top-12 z-[5] -mt-4 h-4 w-full bg-[linear-gradient(to_bottom,var(--v2-background-bg-base),transparent)]" />
<div class="px-6" style={{ "padding-bottom": `${args.height}px` }}>
<CurrentSessionProviders document={storyDocument(stickyParts.filter((part) => part.type === "tool"))}>
<CurrentContextToolGroup