Fix merge request header marginsleipert-fix-mr-widget-header-margins

2 files changed, 40 insertions, 25 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 4c3f8dff3c4..acfdab3a015 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -28,11 +28,17 @@ export default {
       return this.mr.divergedCommitsCount > 0;
     },
     commitsBehindText() {
-      return sprintf(s__('mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch'), {
-        commitsBehindLinkStart: `<a href="${_.escape(this.mr.targetBranchPath)}">`,
-        commitsBehind: n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount),
-        commitsBehindLinkEnd: '</a>',
-      }, false);
+      return sprintf(
+        s__(
+          'mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch',
+        ),
+        {
+          commitsBehindLinkStart: `<a href="${_.escape(this.mr.targetBranchPath)}">`,
+          commitsBehind: n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount),
+          commitsBehindLinkEnd: '</a>',
+        },
+        false,
+      );
     },
     branchNameClipboardData() {
       // This supports code in app/assets/javascripts/copy_to_clipboard.js that
@@ -45,17 +51,24 @@ export default {
     },
     webIdePath() {
       if (this.mr.canPushToSourceBranch) {
-        return mergeUrlParams({
-          target_project: this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath ?
-            this.mr.targetProjectFullPath : '',
-        }, webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`));
+        return mergeUrlParams(
+          {
+            target_project:
+              this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath
+                ? this.mr.targetProjectFullPath
+                : '',
+          },
+          webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`),
+        );
       }
 
       return null;
     },
     ideButtonTitle() {
       return !this.mr.canPushToSourceBranch
-        ? s__('mrWidget|You are not allowed to edit this project directly. Please fork to make changes.')
+        ? s__(
+            'mrWidget|You are not allowed to edit this project directly. Please fork to make changes.',
+          )
         : '';
     },
   },
@@ -104,37 +117,34 @@ export default {
 
       <div
         v-if="mr.isOpen"
-        class="branch-actions"
+        class="branch-actions d-flex"
       >
-        <span
+        <a
+          v-if="!mr.sourceBranchRemoved"
           v-tooltip
+          :href="webIdePath"
           :title="ideButtonTitle"
+          :class="{ disabled: !mr.canPushToSourceBranch }"
+          class="btn btn-default js-web-ide d-none d-md-inline-block append-right-8"
           data-placement="bottom"
           tabindex="0"
+          role="button"
         >
-          <a
-            v-if="!mr.sourceBranchRemoved"
-            :href="webIdePath"
-            :class="{ disabled: !mr.canPushToSourceBranch }"
-            class="btn btn-default inline js-web-ide d-none d-md-inline-block"
-            role="button"
-          >
-            {{ s__("mrWidget|Open in Web IDE") }}
-          </a>
-        </span>
+          {{ s__("mrWidget|Open in Web IDE") }}
+        </a>
         <button
           :disabled="mr.sourceBranchRemoved"
           data-target="#modal_merge_info"
           data-toggle="modal"
-          class="btn btn-default inline js-check-out-branch"
+          class="btn btn-default js-check-out-branch append-right-default"
           type="button"
         >
           {{ s__("mrWidget|Check out branch") }}
         </button>
-        <span class="dropdown prepend-left-10">
+        <span class="dropdown">
           <button
             type="button"
-            class="btn inline dropdown-toggle"
+            class="btn dropdown-toggle"
             data-toggle="dropdown"
             aria-label="Download as"
             aria-haspopup="true"
diff --git a/changelogs/unreleased/leipert-fix-mr-widget-header-margins.yml b/changelogs/unreleased/leipert-fix-mr-widget-header-margins.yml
new file mode 100644
index 00000000000..9c23244d48b
--- /dev/null
+++ b/changelogs/unreleased/leipert-fix-mr-widget-header-margins.yml
@@ -0,0 +1,5 @@
+---
+title: Fix merge request header margins
+merge_request: 21878
+author:
+type: other