Use wide dropdown for snippet embed

We'll want to abstract this out to a prop
on the GitLab UI component

app/assets/javascripts/snippets/components/embed_dropdown.vue

@@ -45,7 +45,11 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown right :text="$options.MSG_EMBED" menu-class="gl-px-1! gl-pb-5!">
+  <gl-dropdown
+    right
+    :text="$options.MSG_EMBED"
+    menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
+  >
     <template v-for="{ name, value } in sections">
       <gl-dropdown-header :key="`header_${name}`" data-testid="header">{{
         name
@@ -53,7 +57,7 @@ export default {
       <gl-dropdown-text
         :key="`input_${name}`"
         tag="div"
-        class="gl-dropdown-text-py-0"
+        class="gl-dropdown-text-py-0 gl-dropdown-text-block"
         data-testid="input"
       >
         <gl-form-input-group :value="value" readonly select-on-click>

app/assets/stylesheets/framework/dropdowns.scss

@@ -1113,3 +1113,19 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     padding-bottom: 0;
   }
 }
+
+// This class won't be needed once we can directly add utility classes to the child
+// https://github.com/bootstrap-vue/bootstrap-vue/issues/5669
+.gl-dropdown-text-block {
+  .b-dropdown-text {
+    display: block;
+  }
+}
+
+// This class won't be needed once we can add a prop for this in the GitLab UI component
+// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966
+.gl-new-dropdown {
+  .gl-dropdown-menu-wide {
+    width: $gl-dropdown-width-wide;
+  }
+}