Skip to content

[repo:objectui] Record page: related-list rows paint over the sticky 详情/相关 tab bar while scrolling (sticky header stacking context vs pinned grid column) #14886

Description

@baozhoutao

Summary

On a record detail page, the 详情 / 相关 / 附件 / 历史 tab bar is sticky at the top of the scroll container. When the 相关 tab holds several related lists and the user scrolls, the rows of the related-list grid scroll over / through the sticky tab bar instead of disappearing behind it: row text and cells remain visible above the tab labels, and the tab bar becomes hard to read and hit.

Minimal reproduction

Platform 17.2.0 console, viewport 1440×900.

  1. An object with ≥3 related lists, each with a handful of rows (here: 考核方案 with 指标下达 27 rows, 流程节点 4, 参与主体 5, 到人分工 …).
  2. Open a record → 相关 tab → scroll down ~2 screens.

Observed: the tab bar stays pinned at the top of the panel, but grid rows from the related list above it are painted over the tab strip (the cell text 培训完成率 · 运营部 / 成本费用率 · 运营部 shows through the strip, cut off by the bar's top edge). The row's trailing action cell is the most visible part.

Likely where (not confirmed by bisect)

The record page tab strip is sticky with a low stacking context, while the related-list grid pins its trailing action column with

Cr = `sticky right-0 z-10 bg-background border-l border-border`

(plugin-grid chunk). A sticky child with z-10 inside a scrolled sibling can win against a sticky header that has no explicit z-index above it. Whatever the exact pair, the header should establish a stacking context above any content that scrolls under it.

Expected

  • The sticky tab bar paints above everything that scrolls beneath it (opaque background + a z-index higher than any sticky/pinned cell in the tab panel).
  • Same guarantee for the record page's sticky title header, which sits above the tab bar.

Environment

@objectstack/console 17.2.0 · objectstack dev · Chrome. App: objectstack-ai/kpi, object kpi_plan record page.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions