From b92c142c97c3add1aed736a0a7c7ab044588662d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 May 2023 16:15:59 +0200
Subject: Clean up various avatar dimensions (#24701)

Clean up a few cases where avatar dimensions were overwritten via CSS,
which were no longer needed or were possible to set via HTML width.

Also included are two small fixes:

- Fix one more case of incorrect avatar offset on review timeline
- Vertically center avatars in review sidebar

There is more to be done here, but some of the work depends on Fomantic
`comment` module removal, or in the case of org member lists, a refactor
of the `avatarlink` template to accept a size.

<img width="371" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9c5902fb-2b89-4a7d-a152-60e74c3b2c56">
<img width="306" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/c8d92e2a-91c9-4f4a-a7de-6ae1a6bc0479">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
---
 web_src/css/base.css             |  5 -----
 web_src/css/modules/comment.css  | 14 +-------------
 web_src/css/organization.css     |  2 +-
 web_src/css/repository.css       | 36 +++++-------------------------------
 web_src/css/shared/issuelist.css |  2 --
 5 files changed, 7 insertions(+), 52 deletions(-)

(limited to 'web_src/css')

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4c8d30c1b4..ed00b1a295 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1903,11 +1903,6 @@ img.ui.avatar,
   color: var(--color-text-light);
 }
 
-.repo-title .avatar {
-  width: 32px !important;
-  height: 32px !important;
-}
-
 .repo-title .labels {
   margin-left: 0.5rem;
 }
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 1593c39b7f..5a90c0852f 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -47,20 +47,8 @@
 }
 
 .ui.comments .comment .avatar {
-  display: block;
-  width: 2.5em;
-  height: auto;
   float: left;
-  margin: 0.2em 0 0;
-}
-
-.ui.comments .comment img.avatar,
-.ui.comments .comment .avatar img {
-  display: block;
-  margin: 0 auto;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.25rem;
+  width: 2.5em;
 }
 
 .ui.comments .comment > .content {
diff --git a/web_src/css/organization.css b/web_src/css/organization.css
index 1b10ba157e..eb2dd8a4d9 100644
--- a/web_src/css/organization.css
+++ b/web_src/css/organization.css
@@ -170,7 +170,7 @@
 
 .organization.members .list .item .ui.avatar {
   width: 48px;
-  height: auto;
+  height: 48px;
   margin-right: 1rem;
   align-self: flex-start;
 }
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 0d81d65110..eafe022cee 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -691,11 +691,6 @@
   margin-right: 5px;
 }
 
-.repository.view.issue .merge.box .timeline-avatar {
-  margin-top: 3px;
-  margin-left: 4px;
-}
-
 .repository.view.issue .merge.box .branch-update.grid .row {
   padding-bottom: 1rem;
 }
@@ -788,23 +783,11 @@
   left: -68px;
 }
 
-.repository.view.issue .comment-list .timeline-item .timeline-avatar img {
-  width: 40px !important;
-  height: 40px !important;
-}
-
 /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
 .repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
   display: none;
 }
 
-.repository.view.issue .comment-list .timeline-item img.avatar,
-.repository.view.issue .comment-list .timeline-item .avatar img {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-}
-
 .repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
   padding-top: 0 !important;
 }
@@ -1063,12 +1046,12 @@
 
 .repository.view.issue .comment-list .code-comment {
   border: 1px solid transparent;
-  padding: 0.25rem 0.5rem;
   margin: 0;
 }
 
-.repository.view.issue .comment-list .code-comment .content {
-  border: none !important;
+/* fix fomantic's border-radius via :first-child with hidden elements */
+.collapsible-comment-box:has(.gt-hidden) {
+  border-radius: var(--border-radius) !important;
 }
 
 .repository.view.issue .comment-list .code-comment .comment-header {
@@ -1091,13 +1074,7 @@
 }
 
 .repository.view.issue .comment-list .comment > .avatar ~ .content {
-  margin-left: 3em;
-}
-
-.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;
+  margin-left: 42px;
 }
 
 .repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
@@ -3085,6 +3062,7 @@ td.blob-excerpt {
 }
 
 .sidebar-item-link {
+  display: inline-flex;
   align-items: center;
   word-break: break-all;
 }
@@ -3260,10 +3238,6 @@ td.blob-excerpt {
     margin-left: 6px;
     margin-right: 2px;
   }
-  .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar {
-    height: 24px;
-    width: 24px;
-  }
   .repository.view.issue .comment-list .timeline .comment-header {
     padding-left: 4px;
   }
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index c214406752..db0d4cfbb9 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -69,8 +69,6 @@
 }
 
 .issue.list > .item .assignee img {
-  width: 20px;
-  height: 20px;
   margin-right: 2px;
 }
 
-- 
cgit v1.2.3