Improve the Commit box on the Merge Request Changs tab when browsing per commit

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

@@ -122,8 +122,65 @@ export default {
 </script>
 
 <template>
-  <li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
-    <div class="d-flex align-items-center align-self-start">
+  <li :class="{ 'js-toggle-container': collapsible }" class="commit">
+    <div
+      class="d-block d-sm-flex flex-row-reverse justify-content-between align-items-start flex-lg-row-reverse"
+    >
+      <div
+        class="commit-actions flex-row d-none d-sm-flex align-items-start flex-wrap justify-content-end"
+      >
+        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
+        <commit-pipeline-status
+          v-if="commit.pipeline_status_path"
+          :endpoint="commit.pipeline_status_path"
+          class="d-inline-flex mb-2"
+        />
+        <gl-button-group class="gl-ml-4 gl-mb-4" data-testid="commit-sha-group">
+          <gl-button label class="gl-font-monospace" v-text="commit.short_id" />
+          <clipboard-button
+            :text="commit.id"
+            :title="__('Copy commit SHA')"
+            class="input-group-text"
+          />
+        </gl-button-group>
+        <div
+          v-if="hasNeighborCommits && glFeatures.mrCommitNeighborNav"
+          class="commit-nav-buttons ml-3"
+        >
+          <gl-button-group>
+            <gl-button
+              :href="previousCommitUrl"
+              :disabled="!commit.prev_commit_id"
+              @click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
+            >
+              <span
+                v-if="!commit.prev_commit_id"
+                v-gl-tooltip
+                class="h-100 w-100 position-absolute"
+                :title="__('You\'re at the first commit')"
+              ></span>
+              <gl-icon name="chevron-left" />
+              {{ __('Prev') }}
+            </gl-button>
+            <gl-button
+              :href="nextCommitUrl"
+              :disabled="!commit.next_commit_id"
+              @click.prevent="moveToNeighboringCommit({ direction: 'next' })"
+            >
+              <span
+                v-if="!commit.next_commit_id"
+                v-gl-tooltip
+                class="h-100 w-100 position-absolute"
+                :title="__('You\'re at the last commit')"
+              ></span>
+              {{ __('Next') }}
+              <gl-icon name="chevron-right" />
+            </gl-button>
+          </gl-button-group>
+        </div>
+      </div>
+      <div>
+        <div class="d-flex float-left align-items-center align-self-start">
           <input
             v-if="isSelectable"
             class="mr-2"
@@ -167,7 +224,11 @@ export default {
               {{ s__('CommitWidget|authored') }}
               <time-ago-tooltip :time="commit.authored_date" />
             </div>
-
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
       <pre
         v-if="commit.description_html"
         :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
@@ -175,57 +236,5 @@ export default {
         v-html="commitDescription"
       ></pre>
     </div>
-      <div class="commit-actions flex-row d-none d-sm-flex">
-        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
-        <commit-pipeline-status
-          v-if="commit.pipeline_status_path"
-          :endpoint="commit.pipeline_status_path"
-          class="d-inline-flex"
-        />
-        <gl-button-group class="gl-ml-4" data-testid="commit-sha-group">
-          <gl-button label class="gl-font-monospace" v-text="commit.short_id" />
-          <clipboard-button
-            :text="commit.id"
-            :title="__('Copy commit SHA')"
-            class="input-group-text"
-          />
-        </gl-button-group>
-        <div
-          v-if="hasNeighborCommits && glFeatures.mrCommitNeighborNav"
-          class="commit-nav-buttons ml-3"
-        >
-          <gl-button-group>
-            <gl-button
-              :href="previousCommitUrl"
-              :disabled="!commit.prev_commit_id"
-              @click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
-            >
-              <span
-                v-if="!commit.prev_commit_id"
-                v-gl-tooltip
-                class="h-100 w-100 position-absolute"
-                :title="__('You\'re at the first commit')"
-              ></span>
-              <gl-icon name="chevron-left" />
-              {{ __('Prev') }}
-            </gl-button>
-            <gl-button
-              :href="nextCommitUrl"
-              :disabled="!commit.next_commit_id"
-              @click.prevent="moveToNeighboringCommit({ direction: 'next' })"
-            >
-              <span
-                v-if="!commit.next_commit_id"
-                v-gl-tooltip
-                class="h-100 w-100 position-absolute"
-                :title="__('You\'re at the last commit')"
-              ></span>
-              {{ __('Next') }}
-              <gl-icon name="chevron-right" />
-            </gl-button>
-          </gl-button-group>
-        </div>
-      </div>
-    </div>
   </li>
 </template>

changelogs/unreleased/254706-fix-commit-item-layout-on-mrs.yml

+---
+title: Improve the Commit box on the Merge Request Changs tab when browsing per commit
+merge_request: 43613
+author:
+type: fixed