Consolidate the two review boxes into one (#24738)

View diff:
https://github.com/go-gitea/gitea/pull/24738/files?diff=unified&w=1

Improve layout and functionality in review area:

<img width="439" alt="Screenshot 2023-05-15 at 20 10 01"
src="https://github.com/go-gitea/gitea/assets/115237/be10452b-5829-4927-8801-7b26a57b3dbd">

Remove the "Reviewers" timeline box that appears before the merge box.
it's a duplicate of the top-right review area and all functionality of
it has been moved to the other box:

<img width="868" alt="Screenshot 2023-05-15 at 19 39 31"
src="https://github.com/go-gitea/gitea/assets/115237/35489445-e54b-40d3-b3cf-38d029478f96">

Increase timeline item vertical padding from 12px to 16px:

<img width="449" alt="Screenshot 2023-05-15 at 19 43 50"
src="https://github.com/go-gitea/gitea/assets/115237/919c4f9d-a485-4f51-b08c-2c0fc714a413">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

3 files changed, 37 insertions, 56 deletions

diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index b79f27200c..ee05918e77 100644
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -28,10 +28,6 @@
   word-break: break-all;
 }
 
-.ui.repository.list .item .ui.header .metas {
-  font-size: 14px;
-}
-
 .ui.repository.list .item .time {
   font-size: 12px;
 }
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index ae50bce0ed..799eeb8574 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -3,7 +3,6 @@
 
 .ui.comments {
   margin: 1.5em 0;
-  max-width: 650px;
 }
 
 .ui.comments:first-child {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index daca98bb51..b7bb1b2967 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -67,45 +67,64 @@
   border: 1px var(--color-yellow) solid;
 }
 
-.repository .metas .menu {
-  overflow-x: auto;
-  max-height: 500px;
+.issue-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+@media (max-width: 767.98px) {
+  .issue-content {
+    flex-direction: column;
+  }
+}
+
+.issue-content-left {
+  margin: 0 !important;
+  width: calc(100% - 316px);
 }
 
-.repository .metas .ui.list.assignees .item {
-  line-height: 2.5em;
+.issue-content-right {
+  margin: 0 !important;
+  width: 300px;
+}
+
+@media (max-width: 767.98px) {
+  .issue-content-left,
+  .issue-content-right {
+    width: 100%;
+  }
 }
 
-.repository .metas .ui.list.assignees .teamavatar {
-  margin-top: 0.125rem;
-  margin-left: 6.75px;
-  margin-right: 8.75px;
+.repository .issue-content-right .menu {
+  overflow-x: auto;
+  max-height: 500px;
 }
 
-.repository .metas .ui.list .dependency {
+.repository .issue-content-right .ui.list .dependency {
   padding: 0;
   white-space: nowrap;
 }
 
-.repository .metas .ui.list .title {
+.repository .issue-content-right .ui.list .title {
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @media (max-width: 1200px) {
-  .repository .metas .ui.list .title {
+  .repository .issue-content-right .ui.list .title {
     max-width: 150px;
   }
 }
 
 @media (max-width: 1000px) {
-  .repository .metas .ui.list .title {
+  .repository .issue-content-right .ui.list .title {
     max-width: 100px;
   }
 }
 
-.repository .metas #deadlineForm input {
+.repository .issue-content-right #deadlineForm input {
   width: 12.8rem;
   border-radius: 4px 0 0 4px;
   border-right: 0;
@@ -578,11 +597,7 @@
   font-size: 14px;
 }
 
-.repository.new.issue .comment.form .metas {
-  min-width: 220px;
-}
-
-.repository.new.issue .comment.form .metas .filter.menu {
+.repository.new.issue .comment.form .issue-content-right .filter.menu {
   max-height: 500px;
   overflow-x: auto;
 }
@@ -699,31 +714,6 @@
   margin-top: 1.1rem;
 }
 
-.repository.view.issue .review-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.review-item-left,
-.review-item-right {
-  display: flex;
-  align-items: center;
-}
-
-.review-item-right {
-  gap: 8px;
-  margin-left: 4px;
-}
-
-.repository.view.issue .review-item .divider {
-  margin: 0.5rem 0;
-}
-
-.repository.view.issue .review-item .review-content {
-  padding: 1em 0 1em 3.8em;
-}
-
 .repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
   display: block;
   content: "";
@@ -761,7 +751,7 @@
 
 .repository.view.issue .comment-list .timeline-item,
 .repository.view.issue .comment-list .timeline-item-group {
-  padding: 12px 0;
+  padding: 16px 0;
 }
 
 .repository.view.issue .comment-list .timeline-item-group .timeline-item {
@@ -1132,11 +1122,6 @@
   text-decoration: line-through;
 }
 
-.repository .comment.form .ui.comments {
-  margin-top: -12px;
-  max-width: 100%;
-}
-
 .repository .comment.form .content .field:first-child {
   clear: none;
 }
@@ -1252,7 +1237,8 @@
 }
 
 .repository.compare.pull .pullrequest-form {
-  margin-bottom: 1.5rem;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 .repository.compare.pull .markup {