From 28af325f990954c2106d6f698bea4248dde3f7c6 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 9 Oct 2023 09:21:30 +0200
Subject: [PATCH] Fix x overflow for search results

---
 client/src/app/+search/search.component.html       |  7 +++++--
 client/src/app/+search/search.component.scss       | 14 +++++++++-----
 client/src/app/+search/search.component.ts         |  3 ++-
 .../video-miniature.component.scss                 |  2 +-
 .../video-playlist-miniature.component.scss        |  2 +-
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index fef6f8e8c..44a862273 100644
--- a/client/src/app/+search/search.component.html
+++ b/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>
 
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 11d95df6a..65f1a1668 100644
--- a/client/src/app/+search/search.component.scss
+++ b/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);
 }
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index 62e349c40..ec96bb160 100644
--- a/client/src/app/+search/search.component.ts
+++ b/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()
 
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 06ca4a672..e48dea4a2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/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);
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 2d8377e7b..d14d02d0b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/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);