Iterate on approvals rules table layout
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Columns width
Following the discussion from #432719 (closed), we want to limit the width of the action column:
Since the
Actionsis limited to edit and delete as the max number of actions, could we fix the width of Actions column? This way we could align consistently with either a left or center alignment? I would optimize for whatever looks best here with this column. #432719 (comment 1746986468)
To do that, we need to change table-layout CSS property to fixed and rework the columns width in order to keep the current layout. Currently, not all columns have a defined width.
Collapsible table
The tables have been quite recently changed to a collapsible layout. Using b-table-stacked-md from Bootstrap Vue, the header is not displayed below md breakpoint and the table use :data-label attributes to display each item's header. But we still have leftover styling. Even though the whole <thead> get's display: none, elements within it have the following classes:
d-none d-sm-table-rowd-none d-sm-table-cell
Make sure that ee/app/assets/javascripts/approvals/project_settings/project_rules.vue is free of classes that are redundant. If any of those are still necessary exchange them into GitLab UI utility classes (gl-display-none etc.).