From 0e87fd6c02b2991c26777ff82779dd23d62e1c3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Lui=CC=81s?= <aluis@gitlab.com>
Date: Mon, 28 Sep 2020 20:18:14 +0100
Subject: [PATCH 1/2] Make commit item layout responsive

---
 .../diffs/components/commit_item.vue          | 117 ++++++++++--------
 .../254706-fix-commit-item-layout-on-mrs.yml  |   5 +
 2 files changed, 67 insertions(+), 55 deletions(-)
 create mode 100644 changelogs/unreleased/254706-fix-commit-item-layout-on-mrs.yml

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 09abdbe25d7a65..52d2cff6530718 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -122,67 +122,18 @@ export default {
 </script>
 
 <template>
-  <li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
-    <div class="d-flex align-items-center align-self-start">
-      <input
-        v-if="isSelectable"
-        class="mr-2"
-        type="checkbox"
-        :checked="checked"
-        @change="$emit('handleCheckboxChange', $event.target.checked)"
-      />
-      <user-avatar-link
-        :link-href="authorUrl"
-        :img-src="authorAvatar"
-        :img-alt="authorName"
-        :img-size="40"
-        class="avatar-cell d-none d-sm-block"
-      />
-    </div>
-    <div class="commit-detail flex-list">
-      <div class="commit-content qa-commit-content">
-        <a
-          :href="commit.commit_url"
-          class="commit-row-message item-title"
-          v-html="commit.title_html"
-        ></a>
-
-        <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
-
-        <gl-button
-          v-if="commit.description_html && collapsible"
-          class="js-toggle-button"
-          size="small"
-          icon="ellipsis_h"
-          :aria-label="__('Toggle commit description')"
-        />
-
-        <div class="committer">
-          <a
-            :href="authorUrl"
-            :class="authorClass"
-            :data-user-id="authorId"
-            v-text="authorName"
-          ></a>
-          {{ s__('CommitWidget|authored') }}
-          <time-ago-tooltip :time="commit.authored_date" />
-        </div>
-
-        <pre
-          v-if="commit.description_html"
-          :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
-          class="commit-row-description gl-mb-3 text-dark"
-          v-html="commitDescription"
-        ></pre>
-      </div>
-      <div class="commit-actions flex-row d-none d-sm-flex">
+  <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 flex-column flex-lg-row">
         <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-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"
@@ -226,6 +177,62 @@ export default {
           </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"
+            type="checkbox"
+            :checked="checked"
+            @change="$emit('handleCheckboxChange', $event.target.checked)"
+          />
+          <user-avatar-link
+            :link-href="authorUrl"
+            :img-src="authorAvatar"
+            :img-alt="authorName"
+            :img-size="40"
+            class="avatar-cell d-none d-sm-block"
+          />
+        </div>
+        <div class="commit-detail flex-list">
+          <div class="commit-content qa-commit-content">
+            <a
+              :href="commit.commit_url"
+              class="commit-row-message item-title"
+              v-html="commit.title_html"
+            ></a>
+
+            <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
+
+            <gl-button
+              v-if="commit.description_html && collapsible"
+              class="js-toggle-button"
+              size="small"
+              icon="ellipsis_h"
+              :aria-label="__('Toggle commit description')"
+            />
+
+            <div class="committer">
+              <a
+                :href="authorUrl"
+                :class="authorClass"
+                :data-user-id="authorId"
+                v-text="authorName"
+              ></a>
+              {{ 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 }"
+        class="commit-row-description gl-mb-3 text-dark"
+        v-html="commitDescription"
+      ></pre>
     </div>
   </li>
 </template>
diff --git a/changelogs/unreleased/254706-fix-commit-item-layout-on-mrs.yml b/changelogs/unreleased/254706-fix-commit-item-layout-on-mrs.yml
new file mode 100644
index 00000000000000..bfa48ad3d9327f
--- /dev/null
+++ b/changelogs/unreleased/254706-fix-commit-item-layout-on-mrs.yml
@@ -0,0 +1,5 @@
+---
+title: Improve the Commit box on the Merge Request Changs tab when browsing per commit
+merge_request: 43613
+author:
+type: fixed
-- 
GitLab


From f10ea961ccbc73f10255763e84a820f2fd135c17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Lui=CC=81s?= <aluis@gitlab.com>
Date: Tue, 29 Sep 2020 20:04:49 +0100
Subject: [PATCH 2/2] Make adjustments for signature and pipeline

---
 app/assets/javascripts/diffs/components/commit_item.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 52d2cff6530718..1b747fb7f2038d 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -126,12 +126,14 @@ export default {
     <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 flex-column flex-lg-row">
+      <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"
+          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" />
-- 
GitLab