Audit events streams mobile UI and hierarchy
The audit events streams UI is currently not optimised for smaller screens and we should look at updating the frontend to be more usable for mobiles and other small devices.
There has also been concern raised around the visual hierarchy of the UI in !91986 (comment 1031410648):
It's a little tricky to see the difference between all these streams, since the URL itself is just regular text while all the
labels
are bold. For example, in this screenshotapi.gitlab.com
just gets kind of lost in the middle and the whole thing looks like one stream entry. Should these maybe be separated out a bit? (or is it very unlikely that these would all be expanded at once?🤔 )
We should review the hierarchical structure to make sure the distinct aspects of the UI are clear and easy to follow for the user.
Designs
Small screens |
---|
![]() |
Implementation
frontend
- Update the
stream_destination_editor.vue
rendering for smaller viewports:- Add
stacked="sm"
to thegl-table-lite
. SeeGlTableLite
docs (links to bootstrap docs) on stacking. - When stacked, match the designs as close as possible.
- Render the input labels above the input.
- The inputs should be full width.
- The active checkbox and the remove button should be in the same row, you might need to create a special
sm
only row for this. - Use a GitLab-UI utility class to hide the borders between the header cells.
- Remove the spacing between stacked "rows".
- Update the border radius of the table so that it is rounded.
- The remove button content should be
🗑 Remove
. [Only when stacked!] - Improve the alignment of the
Add header
button so that it's inline with the other buttons.
- Add
- Update component specs.