Fix hidden notifications dropdown on smaller screens

The project/group notifications dropdown was hidden behind the
navigation on smaller screens. This commit fixes this bug by
always showing the dropdown below the toggle button.

Changelog: fixed

app/assets/javascripts/notifications/components/notifications_dropdown.vue

@@ -42,6 +42,9 @@ export default {
     showLabel: {
       default: false,
     },
+    noFlip: {
+      default: false,
+    },
   },
   data() {
     return {
@@ -127,6 +130,7 @@ export default {
       :disabled="disabled"
       :split="isCustomNotification"
       :text="buttonText"
+      :no-flip="noFlip"
       @click="openNotificationsModal"
     >
       <notifications-dropdown-item

app/assets/javascripts/notifications/index.js

@@ -21,6 +21,7 @@ export default () => {
       projectId,
       groupId,
       showLabel,
+      noFlip,
     } = el.dataset;
 
     return new Vue({
@@ -35,6 +36,7 @@ export default () => {
         projectId,
         groupId,
         showLabel: parseBoolean(showLabel),
+        noFlip: parseBoolean(noFlip),
       },
       render(h) {
         return h(NotificationsDropdown);

app/views/groups/_home_panel.html.haml

@@ -31,7 +31,7 @@
               data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = sprite_icon('admin')
           - if @notification_setting
-            .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: @group.id, container_class: 'gl-mx-2 gl-mt-3 gl-vertical-align-top' } }
+            .js-vue-notification-dropdown{ data: { disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), group_id: @group.id, container_class: 'gl-mx-2 gl-mt-3 gl-vertical-align-top', no_flip: 'true' } }
           - if can_create_subgroups
             .gl-px-2.gl-sm-w-auto.gl-w-full
               = link_to _("New subgroup"), new_group_path(parent_id: @group.id), class: "btn btn-default gl-button gl-mt-3 gl-sm-w-auto gl-w-full", data: { qa_selector: 'new_subgroup_button' }

app/views/projects/_home_panel.html.haml

@@ -37,7 +37,7 @@
               = sprite_icon('admin')
           .gl-display-flex.gl-align-items-start.gl-mr-3
             - if @notification_setting
-              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id } }
+              .js-vue-notification-dropdown{ data: { button_size: "small", disabled: emails_disabled.to_s, dropdown_items: notification_dropdown_items(@notification_setting).to_json, notification_level: @notification_setting.level, help_page_path: help_page_path('user/profile/notifications'), project_id: @project.id, no_flip: 'true' } }
 
         .count-buttons.gl-display-flex.gl-align-items-flex-start
           = render 'projects/buttons/star'

spec/frontend/notifications/components/notifications_dropdown_spec.js

@@ -195,6 +195,14 @@ describe('NotificationsDropdown', () => {
         );
       });
     });
+
+    it('passes provided `noFlip` value to `GlDropdown`', () => {
+      wrapper = createComponent({
+        noFlip: true,
+      });
+
+      expect(findDropdown().attributes('no-flip')).toBe('true');
+    });
   });
 
   describe('when selecting an item', () => {