Skip to content

[DRAFT] Add sticky header to GLQL embedded table panel

Alex Fracazorequested to merge
add-sticky-header-glql-table into master

What does this MR do?

Adds sticky positioning to the GLQL embedded table panel header, allowing users to see the panel title and access controls while scrolling through long tables.

Why?

When viewing GLQL embedded tables with many rows, users lose context about which table they're viewing as they scroll down. By making the panel header sticky, users maintain visual context and can easily access the collapse/expand controls and actions menu without scrolling back to the top.

Implementation details

Changes made

crud_component.vue:

  • Added stickyHeader
  • Added headerStickyClasses property that returns sticky positioning classes when enabled

facade.vue:

  • Added sticky-header prop to the <crud-component> for GLQL embedded views

Sticky positioning stack

When enabled, the panel header uses:

  • gl-sticky - Enables sticky positioning
  • gl-top-9 - Positions 36px from viewport top (below work item sticky header)
  • gl-z-2 - Stacks above table content but below work item header (z-3)

Before/After

Before After
CleanShot 2025-10-17 at 14.13.28.mp4 CleanShot 2025-10-17 at 14.14.08.mp4

How to test

  1. Start your GDK: gdk start
  2. Navigate to an issue with a GLQL embedded table (create one if needed):
    • Go to any project wiki or issue description
    • Add a GLQL block
  3. Ensure the table has many rows
  4. Scroll down the page slowly
  5. Verify: The header stays visible at the top
  6. Verify: Collapse/expand button remains accessible while scrolling
  7. Verify: Actions menu (ellipsis) remains accessible while scrolling

Known limitations

Table column headers do not stick due to browser limitations with position: sticky on <thead> elements when using standard table layout (display: table-header-group).

Merge request reports