add channel avatar to video page

css/styles.css

@@ -448,6 +448,9 @@ img {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1;
+    display: flex;
+    align-items: center;
 }
 
 .video-metadata {

css/video-page.css

@@ -145,6 +145,20 @@
     border-bottom: 1px solid #eee;
 }
 
+.channel-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.channel-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
 .channel-avatar img {
     width: 48px;
     height: 48px;
@@ -152,6 +166,22 @@
     object-fit: cover;
 }
 
+.channel-avatar-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.channel-avatar-placeholder i {
+    font-size: 2rem;
+    color: #999;
+}
+
 .channel-name {
     font-size: 1rem;
     font-weight: 600;
@@ -401,9 +431,24 @@
 }
 
 .suggested-video-channel {
-    font-size: 12px;
+    font-size: 0.75rem;
     color: #666;
-    margin-bottom: 5px;
+    margin-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    line-height: 1;
+}
+
+.suggested-video-channel .channel-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.75rem;
+    font-weight: normal;
+    line-height: 1;
+    display: flex;
+    align-items: center;
 }
 
 .suggested-video-metadata {