Fix miniature avatar size

6 files changed, 17 insertions, 8 deletions

diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index e0e9f92e7..e1040fead 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -15,7 +15,9 @@
     <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
       <my-video-miniature
         [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
-        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
+        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
+        actorImageSize="32"
+      >
       </my-video-miniature>
 
       <hr *ngIf="!playlist && i == 0 && length > 1" />
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 835e15110..e74dd1634 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -9,6 +9,8 @@ type ActorInput = {
   url: string
 }
 
+export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
+
 @Component({
   selector: 'my-actor-avatar',
   styleUrls: [ './actor-avatar.component.scss' ],
@@ -20,7 +22,7 @@ export class ActorAvatarComponent {
 
   @Input() previewImage: SafeResourceUrl
 
-  @Input() size: '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
+  @Input() size: ActorAvatarSize
 
   // Use an external link
   @Input() href: string
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 7c4fcc491..645be92bd 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -12,12 +12,12 @@
       <div class="d-flex video-miniature-meta">
         <my-actor-avatar
           *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle"
-          [channel]="video.channel" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
+          [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
         ></my-actor-avatar>
 
         <my-actor-avatar
           *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
-          [account]="video.account" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
+          [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
         ></my-actor-avatar>
 
         <div class="w-100 d-flex flex-column">
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index d74b70d4c..b58c118be 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
+import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
@@ -51,6 +52,8 @@ export class VideoMiniatureComponent implements OnInit {
   }
   @Input() displayVideoActions = true
 
+  @Input() actorImageSize: ActorAvatarSize = '40'
+
   @Input() displayAsRow = false
 
   @Input() videoLinkType: VideoLinkType = 'internal'
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index fb504906c..070aa3398 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -3,9 +3,8 @@
 
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
+  @include peertube-word-wrap(false);
 
-  word-break: break-all;
-  word-wrap: break-word;
   transition: color 0.2s;
   font-weight: $font-semibold;
   color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 6d1e37bb6..b2083e516 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -50,11 +50,14 @@
   }
 }
 
-@mixin peertube-word-wrap {
+@mixin peertube-word-wrap ($with-hyphen: true) {
   word-break: break-word;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  hyphens: auto;
+
+  @if $with-hyphen {
+    hyphens: auto;
+  }
 }
 
 @mixin apply-svg-color ($color) {