Overflow on viewports < 767px in feature_flags Form Feature

Summary

It seems that there is an overflowing Issue on the feature_flags Form Feature. Since the related feature is behind this flag it will be not possible to reproduce this on gitlab.com

Steps to reproduce

A running local instance of GitLab is required to reproduce this.

Here's what I did to reproduce: Either:

• open rails terminal in gdk cd gitlab && bundle exec rails
• execute Feature.disable(:feature_flags_new_version) source
• gdk restart

Or:

• In gitlab/app/assets/javascripts/feature_flags/components/form.vue Comment out L-338-365
• replace L-367 with <div class="row">

Then:

Go to http://gitlab.localdev:3000/YOURUSER/ANYOFYOURPROJECTS/-/feature_flags/new

You should now see NO button which says 'Add Strategy' on it. To render the GlBadge please replace L-138 with return [{"protected": true}]; & L-148 with return true; This will mock us the state the app needs to be in to render the badge.

You now should be able to see a protected badge similar to the one on the provided screenshots and reproduce the behaviour seen in the attached screenshots.

What is the current bug behavior?

GlBadge causing the page to overflow

What is the expected correct behavior?

GlBadge shouldn't leave container.

Relevant logs and/or screenshots