Repo avatar fixes (#13891)

- Split up avatar rendering helpers for performance
- Fix showing repo SVG icon when no avatar is set
- Make repo SVG and avatar same size at 32px
- Fix fork line by adding vertical flexbox on repo title

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

3 files changed, 28 insertions, 35 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 8885ffc409..81c6a310f5 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1247,6 +1247,32 @@ footer {
   margin-bottom: 2px !important;
 }
 
+.repo-title {
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  word-break: break-all;
+  color: var(--color-text-light);
+
+  .avatar {
+    width: 32px !important;
+    height: 32px !important;
+  }
+
+  .labels {
+    margin-left: .5rem;
+
+    > * + * {
+      margin-left: .5rem;
+    }
+  }
+}
+
+.repo-icon {
+  display: inline-block;
+}
+
 .activity-bar-graph {
   background-color: var(--color-primary);
   color: #fff;
diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less
index 5962d411e3..6d6462df6c 100644
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@@ -49,11 +49,6 @@
     .ui.tags {
       margin-bottom: 1em;
     }
-
-    .ui.avatar.image {
-      width: 24px;
-      height: 24px;
-    }
   }
 }
 
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b4cff3490d..1cedb07f12 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -8,38 +8,9 @@
       margin-top: 0;
     }
 
-    .ui.huge.breadcrumb {
-      font-weight: 400;
-      font-size: 1.5rem;
-
-      .label {
-        vertical-align: middle;
-        margin-top: -.29165em;
-      }
-
-      &.repo-title .repo-header-icon {
-        display: inline-block;
-        position: relative;
-
-        .avatar {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          width: 16px;
-          height: 16px;
-          color: #fafafa;
-          box-shadow: 0 0 0 2px;
-          margin: 0;
-        }
-      }
-    }
-
     .fork-flag {
-      margin-left: 36px;
-      margin-top: 3px;
-      display: block;
       font-size: 12px;
-      white-space: nowrap;
+      margin-top: 2px;
     }
 
     .repo-buttons .svg {
@@ -2985,6 +2956,7 @@ tbody.commit-list {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
+  word-break: break-all;
 }
 
 .repo-header .repo-buttons {