Merge branch 'toon-show-latest-button' into 'master'

Move "Show latest version" button to the left

See merge request gitlab-org/gitlab!65338

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>
-      <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"
+        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-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;
   }