From 1b16e5bcfd6513a9e5d3a1454e1937b3db166ae0 Mon Sep 17 00:00:00 2001
From: iamyaash <iamyaash@outlook.com>
Date: Thu, 29 May 2025 13:25:13 +0530
Subject: [PATCH] refactor: added class names to the divs and made a separate
 grid design for mobile layout - added/modified the class names of both date &
 button in commits_list - created a new vertical layout for mobile (3rows,
 212cols-per-row)

---
 templates/repo/pulls/commits_list.tmpl |  8 +++---
 web_src/css/repo.css                   | 36 +++++++++++++++++++++-----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/templates/repo/pulls/commits_list.tmpl b/templates/repo/pulls/commits_list.tmpl
index 96c09562fd..74e7d9410e 100644
--- a/templates/repo/pulls/commits_list.tmpl
+++ b/templates/repo/pulls/commits_list.tmpl
@@ -31,7 +31,7 @@
 			</div>
 		</div>
 
-		<div class="message tw-flex-1">
+		<div class="message">
 			{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
 			<div class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .Message $commitLink ($.Repository.ComposeMetas ctx)}}</div>
 			{{if IsMultilineCommitMessage .Message}}
@@ -71,12 +71,12 @@
 			</a>
 		</div>
 
-		<div class="tw-flex-1 tw-text-right tw-pr-4">
+		<div class="date tw-flex-1 tw-text-right tw-pr-4">
 			{{if .Committer}}{{DateUtils.TimeSince .Committer.When}}{{else}}{{DateUtils.TimeSince .Author.When}}{{end}}
 		</div>
 
-		<div>
-			<button class="btn interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
+		<div class="btn">
+			<button class="interact-bg tw-p-2" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
 			{{if not $.PageIsWiki}}
 				{{if $.FileName}}
 				<a
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 2548400007..8d8ecff60c 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2775,14 +2775,38 @@ tbody.commit-list {
   row-gap: 0.5rem;
   grid-template-columns: minmax(8ch, 15%) 1fr minmax(20ch, 1%) minmax(10ch, 10%) auto;
   align-items: center;
-  .message {padding-left: 10%}
+  .author {margin-right: 10%}
 }
 
 @media (max-width: 640px) {
   .commit-ui-redesign {
-    grid-template-columns: minmax(12ch, 100%) minmax(12ch,10%) auto minmax(10ch,40%) auto;
-    align-items: center;
-    column-gap: 0.5rem;
-    .sha.label {display:none}
+    grid-template-columns: 1fr 1fr;
   }
-}
\ No newline at end of file
+/* manual div allocation in grid cols, since it uses a new layout for mobile */
+  .commit-ui-redesign .author {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  .commit-ui-redesign .date {
+    grid-row: 1;
+    grid-column: 2;
+    justify-self: right;
+  }
+
+  .commit-ui-redesign .message {
+    grid-row: 2;
+    grid-column: 1 / span 2;
+  }
+
+  .commit-ui-redesign .ui.sha.label {
+    grid-row: 3;
+    grid-column: 1;
+  }
+
+  .commit-ui-redesign .btn {
+    grid-row: 3;
+    grid-column: 2;
+    justify-self: right;
+  }
+}