Skip to content

[web-console] Make pipelines table header sticky#5997

Merged
Karakatiza666 merged 1 commit intomainfrom
sticky-table
Apr 6, 2026
Merged

[web-console] Make pipelines table header sticky#5997
Karakatiza666 merged 1 commit intomainfrom
sticky-table

Conversation

@Karakatiza666
Copy link
Copy Markdown
Contributor

@Karakatiza666 Karakatiza666 commented Apr 6, 2026

Made the table controls and header sticky:
Screencast from 2026-04-06 16-22-47.webm

The PR is basically a layout and style change.

Testing: manually tested the desktop-size and mobile-size behavior of pipelines page in a chrome-based browser and Firefox

@Karakatiza666 Karakatiza666 requested a review from mihaibudiu April 6, 2026 13:43
Base automatically changed from pipeline-search-bar to main April 6, 2026 15:09
Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
@Karakatiza666 Karakatiza666 requested review from gz and removed request for mihaibudiu April 6, 2026 18:03
@Karakatiza666 Karakatiza666 added this pull request to the merge queue Apr 6, 2026
Copy link
Copy Markdown

@mythical-fred mythical-fred left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

</div>
<Datatable headless {table}>
<table class="md:px-6">
<thead style="top: {controlsHeight}px; z-index: 1;">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the header actually sticky? has a top offset but I don't see position: sticky / a sticky class here. If nothing sets it elsewhere, the header won't stick.

Copy link
Copy Markdown

@mythical-fred mythical-fred left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing tests for a web-console behavior change (sticky header/controls). Please add test coverage.

{table}
class="w-20 py-1 pr-4 text-right xl:w-32"
field={(p) => p.connectors?.numErrors}
<div class="pipeline-table-wrapper bg-white-dark">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This introduces sticky header/controls behavior. Per web-console rule, behavior changes need tests. Please add coverage (e2e/component) that the header/controls remain visible when scrolling the table.

Merged via the queue into main with commit 6b74dab Apr 6, 2026
1 check passed
@Karakatiza666 Karakatiza666 deleted the sticky-table branch April 6, 2026 21:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants