Skip to content

[Chore/Refactor] Fix sticky table header transparency causing content overlap in dark mode #23998

@lyzno1

Description

@lyzno1

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for refactoring, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
  • Please do not modify this template :) and fill in all the required fields.

Description

The sticky table header in the datasets hit-testing page uses a transparent background in dark mode (rgb(24 24 27 / 0.6)), causing table content to visually bleed through the header when scrolling. This creates poor readability and visual confusion.

Motivation

This refactoring improves user experience by:

  • Eliminating visual overlap between scrolling content and sticky headers
  • Maintaining consistent UI behavior between light and dark modes
  • Following UI best practices for sticky positioned elements

Additional Context

The issue affects the table at web/app/components/datasets/hit-testing/index.tsx lines 140-145. The transparent background was likely intended for aesthetic purposes but creates usability issues when combined with sticky positioning.

Light mode already uses an opaque background, so this change brings dark mode in line with that behavior.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions