Bug: Security Roles table header does not stick to the top of the viewport

[thetanmancan]

Overview

We need to add a scroll bar to the Security Roles table and make the header stay in view, so that it's easy-to-read results when there are a lot of records.

Description

The header of the Security Roles table should stick to the top of the viewport when the user scrolls down the page. However, currently on the TDM Dev site, it does not.

The reason the Security Roles table header should be sticky is that it provides the user information about which columns they are looking at if they have scrolled down the page past the top of the table.

Steps to Reproduce

1. Log into the TDM Dev site using the Security Admin account.
2. Navigate to the Security page.
3. Scroll down the page so that the top of the table goes past the top of the browser viewport.

Expected Result

The table header should stick to the top of the viewport as the user scrolls down.

Actual Result

The table header scrolls up with the rest of the table content.

Security table header is not sticky

Screen.Recording.2025-01-18.203107.mp4

Device Configuration

• Device: Desktop
• OS version: Windows 11
• Browser: Firefox
• Browser version: 134.0.1

Action Items

• Fix bug.
• Review with product, design, and development. Update if needed based on feedback.
• Once finalized, add a slide to the staging deck.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.