Move "Show latest version" button to the left

The buttons at the top of the Merge Request diff view are a bit all over
the place. This change is one step to make them be more intuitive, as
part of https://gitlab.com/gitlab-org/gitlab/-/issues/330579.

The "Show latest version" button was a bit out of place being between
the diff stats and diff preferences.

This change moves that button to the left. It now sits right next to the
commit Prev/Next buttons or version dropdowns. This brings the buttons
which control the range of the diff together.

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/330579
Changelog: changed

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -99,7 +99,7 @@ export default {
         v-gl-tooltip.hover
         variant="default"
         icon="file-tree"
-        class="gl-mr-3 js-toggle-tree-list"
+        class="gl-mr-3 js-toggle-tree-list btn-icon"
         :title="toggleFileBrowserTitle"
         :aria-label="toggleFileBrowserTitle"
         :selected="showTreeList"
@@ -109,7 +109,7 @@ export default {
         {{ __('Viewing commit') }}
         <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
       </div>
-      <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3">
+      <div v-if="hasNeighborCommits" class="commit-nav-buttons">
         <gl-button-group>
           <gl-button
             :href="previousCommitUrl"
@@ -160,20 +160,21 @@ export default {
           />
         </template>
       </gl-sprintf>
+      <gl-button
+        v-if="commit || startVersion"
+        :href="latestVersionPath"
+        variant="default"
+        class="js-latest-version"
+        :class="{ 'gl-ml-3': commit && !hasNeighborCommits }"
+      >
+        {{ __('Show latest version') }}
+      </gl-button>
       <div v-if="hasChanges" class="inline-parallel-buttons d-none d-md-flex ml-auto">
         <diff-stats
           :diff-files-count-text="diffFilesCountText"
           :added-lines="addedLines"
           :removed-lines="removedLines"
         />
-        <gl-button
-          v-if="commit || startVersion"
-          :href="latestVersionPath"
-          variant="default"
-          class="gl-mr-3 js-latest-version"
-        >
-          {{ __('Show latest version') }}
-        </gl-button>
         <gl-button
           v-show="whichCollapsedTypes.any"
           variant="default"

app/assets/stylesheets/pages/commits.scss

@@ -183,6 +183,8 @@
 }
 
 .commit-nav-buttons {
+  margin: 0 0.5rem;
+
   a.btn,
   button {
     // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730

app/assets/stylesheets/pages/merge_requests.scss

@@ -706,7 +706,7 @@ $tabs-holder-z-index: 250;
 
   .mr-version-dropdown,
   .mr-version-compare-dropdown {
-    margin: 0 7px;
+    margin: 0 0.5rem;
   }
 
   .dropdown-title {
@@ -715,7 +715,7 @@ $tabs-holder-z-index: 250;
 
   // Shortening button height by 1px to make compare-versions
   // header 56px and fit into our 8px design grid
-  button {
+  .btn {
     height: 34px;
   }