From dc26e33376634bfec75e0ea23507cc79ac8722ed Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 5 Dec 2024 14:47:06 -0700
Subject: [PATCH] Reorganize last commit block

Changelog: changed
---
 .../repository/components/commit_info.vue     | 16 +++-----
 .../repository/components/last_commit.vue     | 37 ++++++++++---------
 app/assets/stylesheets/page_bundles/tree.scss |  2 +-
 app/assets/stylesheets/pages/commits.scss     |  5 ---
 app/views/projects/_files.html.haml           |  2 +-
 app/views/projects/commits/_commit.html.haml  |  2 +-
 .../components/code_owners/code_owners.vue    |  2 +-
 7 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/repository/components/commit_info.vue b/app/assets/javascripts/repository/components/commit_info.vue
index ae9002f9f35659..35da16b641c9e9 100644
--- a/app/assets/javascripts/repository/components/commit_info.vue
+++ b/app/assets/javascripts/repository/components/commit_info.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="well-segment commit gl-flex gl-min-h-8 gl-w-full gl-p-2">
+  <div class="commit gl-flex gl-min-h-8 gl-w-full gl-px-4 gl-py-3">
     <user-avatar-link
       v-if="commit.author"
       :link-href="commit.author.webPath"
@@ -84,12 +84,9 @@ export default {
       :img-src="commit.authorGravatar || $options.defaultAvatarUrl"
       :size="32"
     />
-    <div class="commit-detail flex-list gl-flex gl-min-w-0 gl-grow">
-      <div
-        class="commit-content gl-inline-flex gl-w-full gl-flex-wrap gl-items-baseline"
-        data-testid="commit-content"
-      >
-        <div class="gl-inline-flex gl-basis-full gl-items-center gl-gap-x-3">
+    <div class="commit-detail flex-list gl-flex">
+      <div class="commit-content gl-flex gl-flex-col" data-testid="commit-content">
+        <div class="gl-flex gl-items-center gl-gap-x-3">
           <gl-link
             v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml"
             :href="commit.webPath"
@@ -107,9 +104,10 @@ export default {
             icon="ellipsis_h"
             @click="toggleShowDescription"
           />
+          <slot></slot>
         </div>
         <div
-          class="committer gl-basis-full gl-truncate gl-text-sm"
+          class="committer gl-truncate gl-text-sm"
           :class="{ 'gl-inline-flex': truncateAuthorName }"
           data-testid="committer"
         >
@@ -134,8 +132,6 @@ export default {
           class="commit-row-description gl-mb-3 gl-whitespace-pre-wrap"
         ></pre>
       </div>
-      <div class="gl-grow"></div>
-      <slot></slot>
     </div>
     <div
       v-if="prevBlameLink"
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 35eea946851a2d..8b87d8ec3b7563 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { sprintf, s__ } from '~/locale';
@@ -21,7 +21,6 @@ export default {
     ClipboardButton,
     SignatureBadge,
     CiIcon,
-    GlButtonGroup,
     GlButton,
     GlLoadingIcon,
   },
@@ -118,30 +117,34 @@ export default {
 
   <div v-else-if="commit">
     <commit-info :commit="commit" class="gl-hidden sm:gl-flex">
-      <div class="commit-actions gl-flex gl-items-start">
-        <signature-badge v-if="commit.signature" :signature="commit.signature" class="gl-h-7" />
-        <div v-if="commit.pipeline" class="gl-ml-5 gl-flex gl-h-7 gl-items-center">
+      <div class="commit-actions gl-flex gl-items-center">
+        <signature-badge
+          v-if="commit.signature"
+          :signature="commit.signature"
+          class="gl-mr-3 gl-h-7"
+        />
+        <div v-if="commit.pipeline" class="gl-mr-3 gl-flex gl-h-7 gl-items-center">
           <ci-icon
             :status="commit.pipeline.detailedStatus"
             :aria-label="statusTitle"
             class="js-commit-pipeline"
           />
         </div>
-        <gl-button-group class="js-commit-sha-group gl-ml-4 gl-flex gl-items-center">
-          <gl-button label class="gl-font-monospace" data-testid="last-commit-id-label">{{
-            showCommitId
-          }}</gl-button>
-          <clipboard-button
-            :text="commit.sha"
-            :title="__('Copy commit SHA')"
-            class="input-group-text"
-          />
-        </gl-button-group>
-        <gl-button
+        <div class="gl-font-monospace" data-testid="last-commit-id-label">{{ showCommitId }}</div>
+        <clipboard-button
+          :text="commit.sha"
+          :title="__('Copy commit SHA')"
+          size="small"
+          class="gl-ml-1"
           category="tertiary"
+        />
+        <span class="gl-ml-2 gl-mr-3">&middot;</span>
+        <gl-button
+          variant="link"
+          size="small"
           data-testid="last-commit-history"
           :href="historyUrl"
-          class="gl-ml-4"
+          class="gl-ml-1"
         >
           {{ __('History') }}
         </gl-button>
diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index 9323efce53db2c..e40de96fb9262b 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -1,7 +1,7 @@
 @import 'mixins_and_variables_and_functions';
 
 .project-last-commit {
-  min-height: 4.75rem;
+  min-height: 3rem;
 }
 
 .tree-holder {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 1d10414284eb41..a6b9c9e68625d6 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -72,11 +72,6 @@
   .ci-status-icon svg {
     vertical-align: text-bottom;
   }
-
-  > .btn,
-  > .commit-sha-group {
-    margin-left: $gl-padding;
-  }
 }
 
 .commit-nav-buttons {
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index f18a980ce1db3f..6f658c8d2f4993 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -42,7 +42,7 @@
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
-  .info-well.project-last-commit.gl-flex-col.gl-mt-5
+  .gl-border.project-last-commit.gl-flex-col.gl-my-5.gl-rounded-base
     #js-last-commit.gl-m-auto{ data: {ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref)} }
       = gl_loading_icon(size: 'md')
     - if project.licensed_feature_available?(:code_owners)
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index a573471a0fedcb..c90ca3643a3fcd 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -75,7 +75,7 @@
         = render partial: 'projects/commit/ajax_signature', locals: { commit: commit }
 
       - if show_legacy_ci_icon && commit_status
-        = render_commit_status(commit, commit_status, ref: ref)
+        .gl-mr-4= render_commit_status(commit, commit_status, ref: ref)
 
       .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id, ref: ref) } }
 
diff --git a/ee/app/assets/javascripts/vue_shared/components/code_owners/code_owners.vue b/ee/app/assets/javascripts/vue_shared/components/code_owners/code_owners.vue
index 33308a5c1003cf..56243c04991b7b 100644
--- a/ee/app/assets/javascripts/vue_shared/components/code_owners/code_owners.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/code_owners/code_owners.vue
@@ -139,7 +139,7 @@ export default {
 <template>
   <div
     v-if="filePath"
-    class="well-segment blob-auxiliary-viewer file-owner-content gl-flex gl-items-center gl-justify-between"
+    class="blob-auxiliary-viewer file-owner-content gl-border-t gl-flex gl-items-center gl-justify-between gl-px-5 gl-py-3"
   >
     <div class="gl-flex gl-flex-wrap gl-pr-3">
       <div>
-- 
GitLab