[FE] Fix import page tables responsiveness
What does this MR do and why?
- Imports projects (eg. GitHub, manifest import)
The import-projects-table was not previously mobile-responsive, however it was possible to scroll horizontally.
With the panel-based UI, the table needs to retain the scroll when the middle panel is constrained.
- Direct transfer table
As the sticky header top alignment problem was fixed by another MR !206978 (merged). So this MR now focuses on:
- reducing the gap between the thead row [Source group | Path of new group | Status] and the top row with the
import all with projectsbutton - Also fixes the problem where (when an group has already been imported) two buttons are in the far right column but the Migration details is misaligned.
Instead of fiddling with the sticky header calculation in import.scss, I considered other high-traffic tables in the app (eg. MRs and Issues) and they do not use a sticky header. Thus, this MR removes the sticky style.
References
- Project studio epic -> https://gitlab.com/groups/gitlab-org/-/epics/18787
- Follow up issue to migrate the projects table to pajamas -> #572677
Screenshots or screen recordings
| Before | After |
|---|---|
|
Import Projects Table |
|
|
|
|
|
Import Table (used in direct transfer) |
|
|
|
|
How to set up and validate locally
- Have the panel-based UI feature flags on and Duo chat enabled
- Navigate to projects/new
- You'll need a Github access token (to select GitHub). Or try the manifest import
- input the access token and view the table. Best if you have a lot of repos.
- For the direct transfer page, Try to import a group here http://127.0.0.1:3000/groups/new#import-group-pane
- View the table where you choose a source and destination group
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #572478 (closed)