fix: code review comments on mobile (#17321)

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index c7d7574231ed5bc4f6d7d5eb37326bed6f1879b7..cb95720e296b1f532f6ac290d17aa6a087e033ae 100644 (file)
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -521,7 +521,7 @@
                                                                                </div>
                                                                        </div>
                                                                {{end}}
-                                                               <div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} p-3">
+                                                               <div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}}">
                                                                        <div class="ui comments mb-0">
                                                                                {{range $comms}}
                                                                                        {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
@@ -590,7 +590,7 @@
                                                                                        </div>
                                                                                {{end}}
                                                                        </div>
-                                                                       <div class="df ac fw mt-3 mb-2 mx-3">
+                                                                       <div class="code-comment-buttons df ac fw mt-3 mb-2 mx-3">
                                                                                <div class="f1">
                                                                                        {{if $resolved}}
                                                                                                <div class="ui grey text">
@@ -599,7 +599,7 @@
                                                                                                </div>
                                                                                        {{end}}
                                                                                </div>
-                                                                               <div>
+                                                                               <div class="code-comment-buttons-buttons">
                                                                                        {{if and $.CanMarkConversation $isNotPending}}
                                                                                                <button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index $comms 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
                                                                                                        {{if $resolved}}

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 3d7d40ffa3427eebd66c5dfd63ba122df8dbc9bf..9f32f427f3d67ae34d6ab62618b5f6c430b9126a 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -955,6 +955,10 @@
 
       .ui.comments {
         max-width: 100%;
+
+        .avatar {
+          margin-right: .5rem;
+        }
       }
 
       .comment {

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 2b15eec82d7c77a4c782ccf3de64a66784810fe3..12bd6a608a8b84f96b6a729381a139b7c13ba185 100644 (file)
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -48,13 +48,51 @@
 }
 
 .comment-code-cloud {
-  padding: .5rem;
-  padding-left: 0;
+  padding: .5rem !important;
   position: relative;
   margin: 0 auto;
 
+  @media @mediaSm {
+    padding: .75rem !important;
+
+    .code-comment-buttons {
+      margin: .5rem 0 .25rem !important;
+
+      .code-comment-buttons-buttons {
+        width: 100%;
+      }
+    }
+  }
+
   .comments .comment {
     margin: 0;
+
+    @media @mediaSm {
+      padding: 0;
+
+      .comment-header-right.actions .ui.basic.label {
+        display: none;
+      }
+
+      .avatar {
+        width: auto;
+        float: none;
+        margin: 0 .5rem 0 0;
+        flex-shrink: 0;
+
+        &.image {
+          margin: 0 !important;
+        }
+      }
+
+      .comment-content {
+        margin-left: 0 !important;
+      }
+
+      &.code-comment {
+        padding: 0 0 .5rem !important;
+      }
+    }
   }
 
   .attached {
@@ -112,6 +150,17 @@
       display: block;
     }
   }
+
+  @media @mediaSm {
+    .button {
+      width: 100%;
+      margin: 0 !important;
+
+      &:not(:last-child) {
+        margin-bottom: .75rem !important;
+      }
+    }
+  }
 }
 
 .diff-file-body .comment-form {
@@ -142,6 +191,7 @@ a.blob-excerpt:hover {
     > .ui.segment {
       width: 94vw;
     }
+
     .editor-toolbar {
       overflow-x: auto;
     }