Fixes responsive actions being visible when they shouldn't

Closes #342620

app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue

@@ -30,7 +30,7 @@ export default {
 <template>
   <div>
     <gl-dropdown
-      v-if="tertiaryButtons"
+      v-if="tertiaryButtons.length"
       :text="dropdownLabel"
       icon="ellipsis_v"
       no-caret

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -143,7 +143,10 @@ export default {
         :is-loading="isLoadingSummary"
         :icon-name="statusIconName"
       />
-      <div class="media-body gl-display-flex gl-flex-direction-row!">
+      <div
+        class="media-body gl-display-flex gl-flex-direction-row!"
+        data-testid="widget-extension-top-level"
+      >
         <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <div v-else v-safe-html="summary(collapsedData)"></div>

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

-import { GlBadge, GlLink, GlIcon } from '@gitlab/ui';
+import { GlBadge, GlLink, GlIcon, GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
@@ -913,6 +913,10 @@ describe('MrWidgetOptions', () => {
 
       await Vue.nextTick();
 
+      expect(
+        wrapper.find('[data-testid="widget-extension-top-level"]').find(GlDropdown).exists(),
+      ).toBe(false);
+
       const collapsedSection = wrapper.find('[data-testid="widget-extension-collapsed-section"]');
       expect(collapsedSection.exists()).toBe(true);
       expect(collapsedSection.text()).toContain('Hello world');