Fix x overflow for search results

client/src/app/+search/search.component.html

@@ -36,7 +36,10 @@
   <ng-container *ngFor="let result of results">
     <div *ngIf="isVideoChannel(result)" class="entry video-channel">
 
-      <my-actor-avatar [actor]="result" actorType="channel" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar>
+      <my-actor-avatar
+        [actor]="result" actorType="channel"
+        [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"
+      ></my-actor-avatar>
 
       <div class="video-channel-info">
         <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
@@ -48,7 +51,7 @@
         </a>
 
         <ng-template #aContent>
-          <div class="video-channel-display-name">{{ result.displayName }}</div>
+          <div class="video-channel-display-name me-2">{{ result.displayName }}</div>
           <div class="video-channel-name">{{ result.nameWithHost }}</div>
         </ng-template>
 

client/src/app/+search/search.component.scss

@@ -4,11 +4,11 @@
 
 @mixin build-channel-img-size ($video-img-width) {
   $image-size: min(130px, $video-img-width);
-  $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
+  $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width as the video miniature
 
   @include actor-avatar-size($image-size);
 
-  margin: 0 $margin-size 0 $margin-size;
+  margin: 0 calc($margin-size + 1rem) 0 $margin-size;
 }
 
 .search-result {
@@ -57,9 +57,14 @@
   max-width: 800px;
 }
 
+.video-channel {
+  my-actor-avatar {
+    @include margin-right(1rem);
+  }
+}
+
 .video-channel-info {
   flex-grow: 1;
-  margin: 0 10px;
   width: fit-content;
 }
 
@@ -70,6 +75,7 @@
   align-items: baseline;
   color: pvar(--mainForegroundColor);
   width: fit-content;
+  flex-wrap: wrap;
 }
 
 .video-channel-display-name {
@@ -78,8 +84,6 @@
 }
 
 .video-channel-name {
-  @include margin-left(5px);
-
   font-size: $video-miniature-row-info-font-size;
   color: pvar(--greyForegroundColor);
 }

client/src/app/+search/search.component.ts

@@ -3,7 +3,7 @@ import { LinkType } from 'src/types/link.type'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core'
-import { immutableAssign } from '@app/helpers'
+import { immutableAssign, SimpleMemoize } from '@app/helpers'
 import { validateHost } from '@app/shared/form-validators/host-validators'
 import { Video, VideoChannel } from '@app/shared/shared-main'
 import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
@@ -225,6 +225,7 @@ export class SearchComponent implements OnInit, OnDestroy {
     return undefined
   }
 
+  @SimpleMemoize()
   getInternalChannelUrl (channel: VideoChannel) {
     const linkType = this.getLinkType()
 

client/src/app/shared/shared-video-miniature/video-miniature.component.scss

@@ -159,7 +159,7 @@ my-actor-avatar {
   }
 
   my-video-thumbnail {
-    @include margin-right(10px);
+    @include margin-right(1rem);
 
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);

client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss

@@ -99,7 +99,7 @@
   }
 
   .miniature-thumbnail {
-    @include margin-right(10px);
+    @include margin-right(1rem);
 
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);