Fix merge request header margins

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'), {
+      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);
+        },
+        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"
-      >
-        <span
-          v-tooltip
-          :title="ideButtonTitle"
-          data-placement="bottom"
-          tabindex="0"
+        class="branch-actions d-flex"
       >
         <a
           v-if="!mr.sourceBranchRemoved"
+          v-tooltip
           :href="webIdePath"
+          :title="ideButtonTitle"
           :class="{ disabled: !mr.canPushToSourceBranch }"
-            class="btn btn-default inline js-web-ide d-none d-md-inline-block"
+          class="btn btn-default js-web-ide d-none d-md-inline-block append-right-8"
+          data-placement="bottom"
+          tabindex="0"
           role="button"
         >
           {{ s__("mrWidget|Open in Web IDE") }}
         </a>
-        </span>
         <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"

changelogs/unreleased/leipert-fix-mr-widget-header-margins.yml

+---
+title: Fix merge request header margins
+merge_request: 21878
+author:
+type: other