<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=439571) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=439571) </details> <!--IssueSummary end--> ## Columns width Following the discussion from #432719, we want to limit the width of the action column: > Since the `Actions` is 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. https://gitlab.com/gitlab-org/gitlab/-/issues/432719#note_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-row` - `d-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.).