Review fixes and enhancements (#24526)

- Fix regression with icons wrapping from
https://github.com/go-gitea/gitea/pull/24459
- Fix box misalignment on small screen
- Fix avatar misalignment on review comment
- Fix incorrect underline hover effect on review icons
- Move status icon to left side in review box
- Enhance review icon colors, add helper function for it
- Add missing inline avatars in review comments
- Tweak icon sizes because some octicons have inconsistent sizing

### Before
<img width="655" alt="Screenshot 2023-05-04 at 20 50 28"
src="https://user-images.githubusercontent.com/115237/236301230-92325507-6e03-47ac-bfb4-c9ddde310571.png">
<img width="260" alt="Screenshot 2023-05-04 at 20 50 42"
src="https://user-images.githubusercontent.com/115237/236301236-0dfa50e7-b8fc-4179-ae68-d872bc90f1f3.png">

### After
<img width="498" alt="Screenshot 2023-05-04 at 20 55 08"
src="https://user-images.githubusercontent.com/115237/236301810-23862c2c-c0a9-43a4-a3eb-ee611c14a7f4.png">
<img width="219" alt="Screenshot 2023-05-04 at 20 55 16"
src="https://user-images.githubusercontent.com/115237/236301817-d0de02ea-6ab5-43e1-9183-6b3848b72995.png">

---------

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

1 files changed, 19 insertions, 21 deletions

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 6709b127db..0d81d65110 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -691,49 +691,41 @@
   margin-right: 5px;
 }
 
-.repository.view.issue .pull .merge.box .timeline-avatar {
+.repository.view.issue .merge.box .timeline-avatar {
   margin-top: 3px;
   margin-left: 4px;
 }
 
-.repository.view.issue .pull .merge.box .branch-update.grid .row {
+.repository.view.issue .merge.box .branch-update.grid .row {
   padding-bottom: 1rem;
 }
 
-.repository.view.issue .pull .merge.box .branch-update.grid .row .icon {
+.repository.view.issue .merge.box .branch-update.grid .row .icon {
   margin-top: 1.1rem;
 }
 
-.repository.view.issue .pull .review-item {
+.repository.view.issue .review-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.repository.view.issue .pull .review-item .review-item-left,
-.repository.view.issue .pull .review-item .review-item-right {
+.review-item-left,
+.review-item-right {
   display: flex;
   align-items: center;
 }
 
-.repository.view.issue .pull .review-item .text {
-  margin: 0.3em 0 0.5em 0.5em;
-}
-
-.repository.view.issue .pull .review-item .type-icon {
-  align-self: flex-start;
-  margin-right: 1em;
-}
-
-.repository.view.issue .pull .review-item .type-icon i {
-  line-height: 1.8em;
+.review-item-right {
+  gap: 8px;
+  margin-left: 4px;
 }
 
-.repository.view.issue .pull .review-item .divider {
+.repository.view.issue .review-item .divider {
   margin: 0.5rem 0;
 }
 
-.repository.view.issue .pull .review-item .review-content {
+.repository.view.issue .review-item .review-content {
   padding: 1em 0 1em 3.8em;
 }
 
@@ -782,6 +774,10 @@
   padding-bottom: 8px;
 }
 
+.repository.view.issue .comment-list .timeline-avatar-offset {
+  margin-top: 48px;
+}
+
 .repository.view.issue .comment-list .timeline-item {
   margin-left: 16px;
   position: relative;
@@ -1098,8 +1094,8 @@
   margin-left: 3em;
 }
 
-.repository.view.issue .comment-list .code-comment img.avatar,
-.repository.view.issue .comment-list .comment img.avatar {
+.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar,
+.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar {
   width: 28px;
   height: 28px;
 }
@@ -3261,6 +3257,8 @@ td.blob-excerpt {
   .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
     display: flex;
     margin-bottom: auto;
+    margin-left: 6px;
+    margin-right: 2px;
   }
   .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar {
     height: 24px;