From 6d90d8f37ded3fe8a9fe3284bb95933d17c4ca06 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Sat, 15 Oct 2022 00:19:01 +0200
Subject: [PATCH 1/4] Improve code comment review on mobile

- Fix placement of avatar image, this was not placed in the
`comment-header-left` and add CSS to cover the limiting of width+height of avatar for
code-review comment on "Files changed" page. This fixes the big
noticeable avatar issue.
- Apply `margin-bottom` to the "next" button, so it's consistent with
the "previous" button.
- Make sure the "next"/"previous" start at `flex-start` on mobile and
not off-screen at `flex-end`.
- Add `flex: 1` to the text, so the browser will nicely wrap the "XXX
commented XXX ago" text besides the avatar and make the header a bit
more compact, still not ideal.
- Resolves #20074
---
 templates/repo/diff/comments.tmpl     |  7 ++-----
 templates/repo/diff/conversation.tmpl |  2 +-
 web_src/less/_repository.less         |  3 +++
 web_src/less/_review.less             | 11 +++++++----
 web_src/less/helpers.less             |  1 +
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 5d298f820c274..f7432f827136a 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -2,15 +2,11 @@
 
 {{$createdStr:= TimeSinceUnix .CreatedUnix $.root.locale}}
 <div class="comment" id="{{.HashTag}}">
-	{{if .OriginalAuthor}}
-		<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
-	{{else}}
-		{{template "shared/user/avatarlink" .Poster}}
-	{{end}}
 	<div class="content comment-container">
 		<div class="ui top attached header comment-header df ac sb">
 			<div class="comment-header-left df ac">
 				{{if .OriginalAuthor}}
+					<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
 					<span class="text black mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
@@ -24,6 +20,7 @@
 						{{end}}
 					</span>
 				{{else}}
+					{{template "shared/user/avatarlink" .Poster}}
 					<span class="text grey">
 						{{template "shared/user/namelink" .Poster}}
 						{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 781e1f6819cbf..204a2146f850d 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -26,7 +26,7 @@
 				{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
 			</ui>
 		</div>
-		<div class="df je ac fw mt-3">
+		<div class="df je js-small ac fw mt-3">
 			<div class="ui buttons mr-2">
 				<button class="ui icon tiny basic button previous-conversation">
 					{{svg "octicon-arrow-up" 12 "icon"}} {{$.locale.Tr "repo.issues.previous"}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5dee3fccdd4db..c649d4254622d 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1126,7 +1126,10 @@
         .comment-content {
           margin-left: 36px;
         }
+      }
 
+      .code-comment,
+      .comment {
         img.avatar {
           width: 28px;
           height: 28px;
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 33e4003b2c7d0..fe74b1bce7eff 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -166,10 +166,7 @@
     .button {
       width: 100%;
       margin: 0 !important;
-
-      &:not(:last-child) {
-        margin-bottom: .75rem !important;
-      }
+      margin-bottom: .75rem !important;
     }
   }
 }
@@ -295,3 +292,9 @@ a.blob-excerpt:hover {
   width: 72px;
   height: 10px;
 }
+
+@media @mediaSm {
+  .comment-code-cloud .ui.comments .comment .text {
+    flex: 1;
+  }
+}
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index 19477f7ecd670..f4756939261c4 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -175,4 +175,5 @@
 @media @mediaSm {
   .db-small { display: block !important; }
   .w-100-small { width: 100% !important; }
+  .js-small { justify-content: flex-start !important; }
 }

From af142d395777970507f769c9d1cfbe4d307d4c0d Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Sat, 22 Oct 2022 14:50:46 +0200
Subject: [PATCH 2/4] Keep "speech bubble" effect

---
 templates/repo/diff/comments.tmpl |  7 +++++--
 web_src/less/_review.less         | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index f7432f827136a..a9097caad12d5 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -2,11 +2,15 @@
 
 {{$createdStr:= TimeSinceUnix .CreatedUnix $.root.locale}}
 <div class="comment" id="{{.HashTag}}">
+  {{if .OriginalAuthor}}
+		<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
+	{{else}}
+		{{template "shared/user/avatarlink" .Poster}}
+	{{end}}
 	<div class="content comment-container">
 		<div class="ui top attached header comment-header df ac sb">
 			<div class="comment-header-left df ac">
 				{{if .OriginalAuthor}}
-					<span class="avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
 					<span class="text black mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
@@ -20,7 +24,6 @@
 						{{end}}
 					</span>
 				{{else}}
-					{{template "shared/user/avatarlink" .Poster}}
 					<span class="text grey">
 						{{template "shared/user/namelink" .Poster}}
 						{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index fe74b1bce7eff..714d65a95c097 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -73,6 +73,14 @@
         width: 100%;
       }
     }
+
+    .ui.buttons {
+      width: 100%;
+
+      .button {
+        flex: 1;
+      }
+    }
   }
 
   .comments .comment {
@@ -80,6 +88,7 @@
 
     @media @mediaSm {
       padding: 0;
+      display: flex;
 
       .comment-header-right.actions .ui.basic.label {
         display: none;
@@ -90,6 +99,10 @@
         float: none;
         margin: 0 .5rem 0 0;
         flex-shrink: 0;
+
+        ~ .content {
+          margin-left: 1em;
+        }
       }
 
       img.avatar {
@@ -292,9 +305,3 @@ a.blob-excerpt:hover {
   width: 72px;
   height: 10px;
 }
-
-@media @mediaSm {
-  .comment-code-cloud .ui.comments .comment .text {
-    flex: 1;
-  }
-}

From 938de6208764c4b9234837a57abfed921f940687 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 24 Oct 2022 23:08:17 +0200
Subject: [PATCH 3/4] margin and padding tweaks

---
 web_src/less/_review.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 52f10a4daa597..645d1c8b40139 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -76,6 +76,7 @@
 
     .ui.buttons {
       width: 100%;
+      margin: 0 !important;
 
       .button {
         flex: 1;
@@ -84,10 +85,9 @@
   }
 
   .comments .comment {
-    margin: 0;
+    padding: 0;
 
     @media @mediaSm {
-      padding: 0;
       display: flex;
 
       .comment-header-right.actions .ui.basic.label {

From 912a196f421171204702eb3ed4c83df20b7d85ab Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 24 Oct 2022 23:50:20 +0200
Subject: [PATCH 4/4] use colspan and display: none to hide tds

---
 templates/repo/diff/section_split.tmpl   |  8 ++++----
 templates/repo/diff/section_unified.tmpl |  2 +-
 web_src/js/features/repo-issue.js        |  6 +++---
 web_src/less/_repository.less            |  3 ++-
 web_src/less/_review.less                | 14 +++++++++++++-
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 6143a47158344..24302e536fa5f 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -101,7 +101,7 @@
 						<td class="lines-num"></td>
 						<td class="lines-escape"></td>
 						<td class="lines-type-marker"></td>
-						<td class="add-comment-left">
+						<td class="add-comment-left" colspan="4">
 							{{if gt (len $line.Comments) 0}}
 								{{if eq $line.GetCommentSide "previous"}}
 									{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
@@ -116,7 +116,7 @@
 						<td class="lines-num"></td>
 						<td class="lines-escape"></td>
 						<td class="lines-type-marker"></td>
-						<td class="add-comment-right">
+						<td class="add-comment-right" colspan="4">
 							{{if eq $line.GetCommentSide "proposed"}}
 								{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
 							{{end}}
@@ -133,7 +133,7 @@
 					<td class="lines-num"></td>
 					<td class="lines-escape"></td>
 					<td class="lines-type-marker"></td>
-					<td class="add-comment-left">
+					<td class="add-comment-left" colspan="4">
 						{{if gt (len $line.Comments) 0}}
 							{{if eq $line.GetCommentSide "previous"}}
 								{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
@@ -143,7 +143,7 @@
 					<td class="lines-num"></td>
 					<td class="lines-escape"></td>
 					<td class="lines-type-marker"></td>
-					<td class="add-comment-right">
+					<td class="add-comment-right" colspan="4">
 						{{if eq $line.GetCommentSide "proposed"}}
 							{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
 						{{end}}
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index 373747002ce85..e83b1f779c383 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -46,7 +46,7 @@
 			{{if gt (len $line.Comments) 0}}
 				<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
 					<td colspan="3" class="lines-num"></td>
-					<td class="add-comment-left add-comment-right" colspan="2">
+					<td class="add-comment-left add-comment-right" colspan="5">
 						{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
 					</td>
 				</tr>
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 9dbe78edf51ba..54cdeb383b8f9 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -513,16 +513,16 @@ export function initRepoPullRequestReview() {
             <td class="lines-num"></td>
             <td class="lines-escape"></td>
             <td class="lines-type-marker"></td>
-            <td class="add-comment-left"></td>
+            <td class="add-comment-left" colspan="4"></td>
             <td class="lines-num"></td>
             <td class="lines-escape"></td>
             <td class="lines-type-marker"></td>
-            <td class="add-comment-right"></td>
+            <td class="add-comment-right" colspan="4"></td>
           ` : `
             <td class="lines-num"></td>
             <td class="lines-num"></td>
             <td class="lines-escape"></td>
-            <td class="add-comment-left add-comment-right" colspan="2"></td>
+            <td class="add-comment-left add-comment-right" colspan="5"></td>
           `}
         </tr>`);
       tr.after(ntr);
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 381200578e0d5..039c471309ff6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3269,7 +3269,8 @@ td.blob-excerpt {
   background: var(--color-diff-inactive);
 }
 
-.code-diff-split tbody tr td:nth-child(5) {
+.code-diff-split tbody tr td:nth-child(5),
+.code-diff-split tbody tr td.add-comment-right {
   border-left: 1px solid var(--color-secondary);
 }
 
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 645d1c8b40139..4dd232945e581 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -48,6 +48,12 @@
   }
 }
 
+.add-comment .lines-num,
+.add-comment .lines-escape,
+.add-comment .lines-type-marker {
+  display: none;
+}
+
 .show-outdated,
 .hide-outdated {
   &:extend(.unselectable);
@@ -59,11 +65,13 @@
 }
 
 .comment-code-cloud {
-  padding: .5rem !important;
+  padding: .5rem 1rem !important;
   position: relative;
   margin: 0 auto;
+  max-width: 1000px;
 
   @media @mediaSm {
+    max-width: auto;
     padding: .75rem !important;
 
     .code-comment-buttons {
@@ -113,6 +121,10 @@
         margin-left: 0 !important;
       }
 
+      .comment-container {
+        width: 100%;
+      }
+
       &.code-comment {
         padding: 0 0 .5rem !important;
       }