From 6ec059165a15a7d2ba4c8c182a28dc33a1149ff7 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 10 Dec 2024 11:09:57 +0100
Subject: [PATCH] Prevent icon layout shift

---
 .../instance-statistics.component.scss             |  1 +
 .../users/user-edit/user-password.component.html   |  2 +-
 .../+admin/overview/videos/video-admin.service.ts  | 14 +++++++-------
 .../overview/videos/video-list.component.scss      |  2 +-
 .../video-watch-playlist.component.html            |  1 -
 .../abuse-list-table.component.scss                |  7 ++++---
 .../shared-main/buttons/copy-button.component.html |  3 ++-
 .../shared-main/buttons/copy-button.component.scss |  6 +-----
 .../channel/channels-setup-message.component.scss  |  4 ++--
 .../search/simple-search-input.component.scss      |  5 +----
 .../download/video-download.component.scss         |  4 ++--
 ...video-playlist-element-miniature.component.html |  2 --
 ...video-playlist-element-miniature.component.scss | 14 ++++----------
 .../video-playlist-element-miniature.component.ts  |  1 -
 .../user-notifications.component.scss              |  1 -
 client/src/sass/bootstrap.scss                     |  2 +-
 client/src/sass/include/_button-mixins.scss        |  4 ----
 17 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/client/src/app/+about/about-instance/instance-statistics.component.scss b/client/src/app/+about/about-instance/instance-statistics.component.scss
index e1d489d28..c2f8ec730 100644
--- a/client/src/app/+about/about-instance/instance-statistics.component.scss
+++ b/client/src/app/+about/about-instance/instance-statistics.component.scss
@@ -32,6 +32,7 @@ my-global-icon {
   left: 16px;
   top: -24px;
   width: 110px;
+  height: 110px;
 
   &.icon-bottom {
     top: 4px;
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 1f8fca050..19724085d 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -6,7 +6,7 @@
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       autocomplete="new-password"
     >
-    <button class="btn btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+    <button class="btn" (click)="togglePasswordVisibility()" type="button">
       @if (showPassword) {
         <ng-container i18n>Hide</ng-container>
       } @else {
diff --git a/client/src/app/+admin/overview/videos/video-admin.service.ts b/client/src/app/+admin/overview/videos/video-admin.service.ts
index 8ab91be96..166b1fe04 100644
--- a/client/src/app/+admin/overview/videos/video-admin.service.ts
+++ b/client/src/app/+admin/overview/videos/video-admin.service.ts
@@ -1,13 +1,13 @@
-import { Observable } from 'rxjs'
-import { catchError, switchMap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, RestPagination, RestService } from '@app/core'
-import { ResultList, VideoInclude, VideoPrivacy } from '@peertube/peertube-models'
-import { getAllPrivacies } from '@peertube/peertube-core-utils'
-import { VideoService, CommonVideoParams } from '@app/shared/shared-main/video/video.service'
-import { Video } from '@app/shared/shared-main/video/video.model'
 import { AdvancedInputFilter } from '@app/shared/shared-forms/advanced-input-filter.component'
+import { Video } from '@app/shared/shared-main/video/video.model'
+import { CommonVideoParams, VideoService } from '@app/shared/shared-main/video/video.service'
+import { getAllPrivacies, omit } from '@peertube/peertube-core-utils'
+import { ResultList, VideoInclude, VideoPrivacy } from '@peertube/peertube-models'
+import { Observable } from 'rxjs'
+import { catchError, switchMap } from 'rxjs/operators'
 
 @Injectable()
 export class VideoAdminService {
@@ -25,7 +25,7 @@ export class VideoAdminService {
     const { pagination, search } = options
 
     let params = new HttpParams()
-    params = this.videoService.buildCommonVideosParams({ params, ...options })
+    params = this.videoService.buildCommonVideosParams({ params, ...omit(options, [ 'search', 'pagination' ]) })
 
     params = params.set('start', pagination.start.toString())
                    .set('count', pagination.count.toString())
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index ac17ce7f7..b80d3ddb9 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -15,10 +15,10 @@ my-embed {
   display: flex;
 
   my-global-icon {
-    width: 16px;
     position: relative;
     top: -2px;
 
+    @include global-icon-size(16px);
     @include margin-left(3px);
   }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
index 3cbfa33ad..38610291f 100644
--- a/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/player-widgets/video-watch-playlist.component.html
@@ -41,7 +41,6 @@
     <my-video-playlist-element-miniature
       [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
       [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
-      [touchScreenEditButton]="true"
     ></my-video-playlist-element-miniature>
   </div>
 </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 5d62f1490..a06ea20dc 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -10,17 +10,18 @@
 
 .abuse-messages {
   my-global-icon {
-    width: 22px;
     position: relative;
-    top: -2px;
+    top: -1px;
 
+    @include global-icon-size(22px);
     @include margin-left(3px);
   }
 }
 
 .table-video-text my-global-icon,
 my-video-cell my-global-icon {
-  width: 15px;
   position: relative;
   top: -2px;
+
+  @include global-icon-size(15px);
 }
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.html b/client/src/app/shared/shared-main/buttons/copy-button.component.html
index c33da3447..c596e0a50 100644
--- a/client/src/app/shared/shared-main/buttons/copy-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.html
@@ -1,5 +1,6 @@
 <button
-  class="btn btn-outline-secondary copy-button"
+  type="button"
+  class="btn copy-button"
   (click)="copy()"
   [title]="title" [ngClass]="{ 'is-input-group': isInputGroup, 'with-border': withBorder }"
 >
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.scss b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
index 800bd14af..347dfed74 100644
--- a/client/src/app/shared/shared-main/buttons/copy-button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
@@ -11,10 +11,6 @@ button:not(.with-border, .is-input-group) {
 }
 
 my-global-icon {
-  width: 15px;
-  line-height: 15px;
-  height: 15px;
-  display: inline-block;
-
+  @include global-icon-size(15px);
   @include margin-right(5px);
 }
diff --git a/client/src/app/shared/shared-main/channel/channels-setup-message.component.scss b/client/src/app/shared/shared-main/channel/channels-setup-message.component.scss
index 225f6f2c6..883ce1333 100644
--- a/client/src/app/shared/shared-main/channel/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/channel/channels-setup-message.component.scss
@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 
 my-global-icon {
-  width: 32px;
-  display: inline-block;
   margin-bottom: 0.75rem;
+
+  @include global-icon-size(32px);
 }
diff --git a/client/src/app/shared/shared-main/search/simple-search-input.component.scss b/client/src/app/shared/shared-main/search/simple-search-input.component.scss
index 5180ad18a..8db405817 100644
--- a/client/src/app/shared/shared-main/search/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/search/simple-search-input.component.scss
@@ -30,8 +30,5 @@ input {
 }
 
 .form-control-clear my-global-icon {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  display: inline-block;
+  @include global-icon-size(20px);
 }
diff --git a/client/src/app/shared/shared-video-miniature/download/video-download.component.scss b/client/src/app/shared/shared-video-miniature/download/video-download.component.scss
index c888c74cc..ec368caa1 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/download/video-download.component.scss
@@ -9,10 +9,10 @@
   }
 
   my-global-icon[iconName=shield] {
-    width: 16px;
     position: relative;
-    top: -2px;
+    top: -1px;
 
+    @include global-icon-size(16px);
     @include margin-left(10px);
   }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 25fd6c48f..517b76af6 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -51,8 +51,6 @@
     </div>
   </a>
 
-  <my-edit-button *ngIf="owned && touchScreenEditButton" [ptRouterLink]="[ '/my-library', 'video-playlists', playlist.shortUUID ]"></my-edit-button>
-
   <div
     *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
     (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 359f13871..cf0de2285 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -29,6 +29,7 @@ my-video-thumbnail,
 .video {
   display: grid;
   grid-template-columns: 1fr auto;
+  align-items: center;
   background-color: pvar(--bg);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
@@ -44,7 +45,6 @@ my-video-thumbnail,
   }
 
   > a {
-    grid-row: 1 / 3;
     display: flex;
     min-width: 0;
     align-items: center;
@@ -56,28 +56,22 @@ my-video-thumbnail,
       min-width: 25px;
 
       my-global-icon {
-        width: 17px;
         position: relative;
         left: -2px;
         color: pvar(--fg-300);
+
+        @include global-icon-size(17px);
       }
     }
   }
 
-  .more,
-  my-edit-button {
-    justify-self: flex-end;
+  .more {
     cursor: pointer;
     min-width: 24px;
 
     @include margin-left(auto);
   }
 
-  .more {
-    display: flex;
-    align-items: center;
-  }
-
   .more-button {
     opacity: 0;
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 096648475..55cc0a23b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -54,7 +54,6 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
   @Input() rowLink = false
   @Input() accountLink = true
   @Input() position: number // Keep this property because we're in the OnPush change detection strategy
-  @Input() touchScreenEditButton = false
 
   @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
 
diff --git a/client/src/app/shared/standalone-notifications/user-notifications.component.scss b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
index 18f65878f..ec8af1753 100644
--- a/client/src/app/shared/standalone-notifications/user-notifications.component.scss
+++ b/client/src/app/shared/standalone-notifications/user-notifications.component.scss
@@ -26,7 +26,6 @@
   }
 
   my-global-icon {
-    width: 24px;
     color: pvar(--secondary-icon-color);
 
     @include margin-right(11px);
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index cac77a5e7..d8ab043c1 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -189,7 +189,7 @@ body {
     my-global-icon {
       opacity: 0.5;
 
-      @include icon(22px);
+      @include global-icon-size(22px);
 
       &:hover {
         opacity: 0.8;
diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss
index 2cec73288..aa3c3ae9c 100644
--- a/client/src/sass/include/_button-mixins.scss
+++ b/client/src/sass/include/_button-mixins.scss
@@ -120,10 +120,6 @@
 @mixin rounded-icon-button {
   padding: 0.5rem !important;
   border-radius: 100% !important;
-
-  my-global-icon {
-    width: 24px;
-  }
 }
 
 @mixin danger-button {