Prevent icon layout shift

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;

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 {

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())

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);
   }
 }

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>

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);
 }

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 }"
 >

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;
+  @include global-icon-size(15px);
-  line-height: 15px;
-  height: 15px;
-  display: inline-block;
-
   @include margin-right(5px);
 }

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);
 }

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;
+  @include global-icon-size(20px);
-  height: 20px;
-  line-height: 20px;
-  display: inline-block;
 }

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);
   }
 

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"

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,
+  .more {
-  my-edit-button {
-    justify-self: flex-end;
     cursor: pointer;
     min-width: 24px;
 
     @include margin-left(auto);
   }
 
-  .more {
-    display: flex;
-    align-items: center;
-  }
-
   .more-button {
     opacity: 0;
 

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>()
 

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);

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;

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 {