Improving reponsive tables to be more flexible
What does this MR do?
POC to improve responsive tables.
Currently the tables scale, with fixed percentage width columns. However this does not display content very neatly when one of the columns holds no information, or has less information then expected.. thus having a lot of left-over space.
That left over space would be useful in other columns where extra information is available given more space!
In this MR I have been playing around with the pipeline list, decoupling info into separate columns for example. It shows us better how we would benefit from such improvements:
What I think we are looking for is a way to improve the tables with grid css rules: https://css-tricks.com/snippets/css/complete-guide-grid/ where we can have intelligent columns:
another method according to @psimyn said:
could we make it columns instead of rows? then just setting min/max width and flex values would do what you want
But i think thats too big a change :)
Are there points in the code the reviewer needs to double check?
Why was this MR needed?
Screenshots (if relevant)
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
API support added - Tests
-
Added for this feature/bug -
All builds are passing
-
- Review
-
Has been reviewed by UX -
Has been reviewed by Frontend -
Has been reviewed by Backend -
Has been reviewed by Database
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master(if it does - rebase it please) -
Squashed related commits together