Fix merge request merge widget responsive design

What does this MR do and why?

Resolves Merge request widget action buttons responsive ... (#376032 - closed)

This MR changes the order of the buttons in:

1. app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
2. app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

Primary buttons now take precedence over secondary ones.

It also allows for the buttons container to wrap to the next line if there's no sufficient space for it.

It also removes margin-based approach to create spacing between buttons in favour of flex gap property which is more versatile.

Screenshots or screen recordings

Screen width	Before	After
1440
1024
768
425
375

How to set up and validate locally

Test merge conflicts widget only

1. Open a merge request with merge conflicts
2. Apply this patch:

conflicts.patch

Index: app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue	(revision 872e8d5c208d7704ad8f0c187c896cea575efb9b)
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue	(date 1670865873435)
@@ -48,6 +48,7 @@
       return this.$apollo.queries.userPermissions.loading && this.$apollo.queries.state.loading;
     },
     showResolveButton() {
+      return true;
       return (
         this.mr.conflictResolutionPath &&
         this.userPermissions.pushToSourceBranch &&

Test all merge widget states

1. Open any merge request
2. Apply this patch:

all_states.patch

Index: app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue	(revision 872e8d5c208d7704ad8f0c187c896cea575efb9b)
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue	(date 1670929353298)
@@ -164,6 +164,7 @@
       return this.mr.state !== 'nothingToMerge';
     },
     componentName() {
+      return classState;
       return stateToComponentMap[this.machineState] || classState[this.mr.state];
     },
     hasPipelineMustSucceedConflict() {
@@ -611,7 +612,11 @@
       </div>
 
       <div class="mr-widget-section" data-qa-selector="mr_widget_content">
-        <component :is="componentName" :mr="mr" :service="service" />
+<!--        <div></div>-->
+        <div v-for="component in componentName" :key="Math.random()">
+          <component :is="component" :mr="mr" :service="service" />
+        </div>
+
         <ready-to-merge
           v-if="mr.commitsCount"
           v-show="shouldShowMergeDetails"
Index: app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue	(revision 872e8d5c208d7704ad8f0c187c896cea575efb9b)
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue	(date 1670865873435)
@@ -48,6 +48,7 @@
       return this.$apollo.queries.userPermissions.loading && this.$apollo.queries.state.loading;
     },
     showResolveButton() {
+      return true;
       return (
         this.mr.conflictResolutionPath &&
         this.userPermissions.pushToSourceBranch &&

3. Uncomment line 615 in app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.