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 screenshot api.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 2️⃣

1. Update the stream_destination_editor.vue rendering for smaller viewports:
   • Add stacked="sm" to the gl-table-lite. See GlTableLite 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.
2. Update component specs.