Merge branch 'merge-request-show-code-button-on-small-screens' into 'master'

Merge request: Show code dropdown on small screens

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/150418



Merged-by: Himanshu Kapoor <info@fleon.org>
Approved-by: Alex Fracazo <afracazo@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Approved-by: Himanshu Kapoor <info@fleon.org>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue

@@ -237,9 +237,9 @@ export default {
       @hidden="hideDropdown"
     >
       <template #toggle>
-        <div class="gl-min-h-7 gl-mb-2 gl-md-mb-0!">
+        <div class="gl-min-h-7 gl-mb-2 gl-sm-mb-0!">
           <gl-button
-            class="gl-md-display-none! gl-new-dropdown-toggle gl-w-full"
+            class="gl-sm-display-none! gl-new-dropdown-toggle gl-w-full"
             button-text-classes="gl-display-flex gl-justify-content-space-between gl-w-full"
             category="secondary"
             tabindex="0"
@@ -249,7 +249,7 @@ export default {
             <gl-icon class="dropdown-chevron" name="chevron-down" />
           </gl-button>
           <gl-button
-            class="gl-display-none gl-md-display-flex! gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret gl-ml-3"
+            class="gl-display-none gl-sm-display-flex! gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
             category="tertiary"
             icon="ellipsis_v"
             tabindex="0"
@@ -275,7 +275,7 @@ export default {
       >
         <gl-disclosure-dropdown-item
           v-if="canUpdateMergeRequest"
-          class="gl-md-display-none!"
+          class="gl-sm-display-none!"
           data-testid="edit-merge-request"
           :item="editItem"
         />

app/views/projects/merge_requests/_code_dropdown.html.haml

-.gl-md-ml-3.dropdown.gl-dropdown{ class: "gl-display-none! gl-md-display-flex!" }
+.gl-sm-ml-3.dropdown.gl-dropdown
   #js-check-out-modal{ data: how_merge_modal_data(@merge_request) }
-  = render Pajamas::ButtonComponent.new(category: :primary, variant: :confirm, button_options: { data: { toggle: 'dropdown', testid: 'mr-code-dropdown' } }) do
+  = render Pajamas::ButtonComponent.new(category: :primary, variant: :confirm, button_text_classes: 'gl-display-inline-flex gl-justify-content-space-between gl-w-full', button_options: { class: 'gl-display-flex gl-align-self-start gl-w-full gl-s-w-auto', data: { toggle: 'dropdown', testid: 'mr-code-dropdown' } }) do
     = _('Code')
     = sprite_icon "chevron-down", size: 16, css_class: "gl-icon gl-mr-0!"
   .dropdown-menu.dropdown-menu-right

app/views/projects/merge_requests/_mr_title.html.haml

@@ -12,25 +12,26 @@
       - c.with_body do
         = _('The source project of this merge request has been removed.')
 
-  .detail-page-header.border-bottom-0.gl-display-block.gl-pt-5{ class: "gl-md-display-flex! #{'is-merge-request' if !fluid_layout}" }
+  .detail-page-header.border-bottom-0.gl-display-block.gl-pt-5{ class: "gl-sm-display-flex! #{'is-merge-request' if !fluid_layout}" }
     .detail-page-header-body
       %h1.title.page-title.gl-font-size-h-display.gl-my-0.gl-display-inline-block.gl-flex-grow-1.gl-word-break-word{ data: { testid: 'title-content' } }
         = markdown_field(@merge_request, :title)
 
       - unless hide_gutter_toggle
         %div
-          = render Pajamas::ButtonComponent.new(icon: "chevron-double-lg-left", button_options: { class: "btn-icon gl-float-right gl-display-block gutter-toggle issuable-gutter-toggle js-sidebar-toggle gl-md-display-none!" })
+          = render Pajamas::ButtonComponent.new(icon: "chevron-double-lg-left", button_options: { class: "btn-icon gl-float-right gl-display-block gutter-toggle issuable-gutter-toggle js-sidebar-toggle gl-sm-display-none!" })
 
     .detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex
       - if can_update_merge_request
         - edit_action_description = _('Edit merge request')
         - edit_action_shortcut = 'e'
         - edit_button_title = "#{edit_action_description} <kbd class='flat ml-1' aria-hidden=true>#{edit_action_shortcut}</kbd>"
-        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: { aria: {label: edit_action_description, keyshortcuts: edit_action_shortcut}, class: "gl-display-none gl-md-display-block has-tooltip js-issuable-edit", data: { html: "true", testid: "edit-title-button" }, title: edit_button_title }) do
+        = render Pajamas::ButtonComponent.new(href: edit_project_merge_request_path(@project, @merge_request), button_options: { aria: {label: edit_action_description, keyshortcuts: edit_action_shortcut}, class: "gl-display-none gl-sm-display-block gl-align-self-start has-tooltip js-issuable-edit", data: { html: "true", testid: "edit-title-button" }, title: edit_button_title }) do
           = _('Edit')
 
-      - if @merge_request.source_project
-        = render 'projects/merge_requests/code_dropdown'
+      .gl-display-flex.gl-flex-direction-column.gl-sm-flex-direction-row.gl-gap-3.gl-w-full.gl-sm-w-auto.gl-mt-2.gl-sm-mt-0
+        - if @merge_request.source_project
+          = render 'projects/merge_requests/code_dropdown'
 
-      - if current_user
-        = render 'projects/merge_requests/close_reopen_draft_report_toggle'
+        - if current_user
+          = render 'projects/merge_requests/close_reopen_draft_report_toggle'