Cleanup sub title CSS

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Followers of your instance</ng-container>
-</h1>
+    <h1 i18n>Followers of your instance</h1>
+  </div>
+</div>
 
 <p-table
   [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Subscriptions of your instance</ng-container>
-</h1>
+    <h1 i18n>Subscriptions of your instance</h1>
+  </div>
+</div>
 
 <p-table
   [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Videos redundancies</ng-container>
-</h1>
+    <h1 i18n>Videos redundancies</h1>
+  </div>
+</div>
 
 <div class="admin-sub-header">
   <div class="select-filter-block">

client/src/app/+admin/moderation/abuse-list/abuse-list.component.html

@@ -1,6 +1,8 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Reports</ng-container>
-</h1>
+    <h1 i18n>Reports</h1>
+  </div>
+</div>
 
 <my-abuse-list-table viewType="admin"></my-abuse-list-table>

client/src/app/+admin/moderation/registration-list/registration-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Registration requests</ng-container>
-</h1>
+    <h1 i18n>Registration requests</h1>
+  </div>
+</div>
 
 <p-table
   [value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Video blocks</ng-container>
-</h1>
+    <h1 i18n>Video blocks</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss

@@ -1,7 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-my-global-icon {
-  width: 24px;
-  height: 24px;
-}

client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts

@@ -23,7 +23,7 @@ import { VideoBlockService } from '@app/shared/shared-moderation/video-block.ser
 @Component({
   selector: 'my-video-block-list',
   templateUrl: './video-block-list.component.html',
-  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ],
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss' ],
   standalone: true,
   imports: [
     GlobalIconComponent,

client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Instance watched words lists</ng-container>
-</h1>
+    <h1 i18n>Instance watched words lists</h1>
+  </div>
+</div>
 
 <em class="d-block" i18n>Video name/description and comments that contain any of the watched words are automatically tagged with the name of the list.</em>
 <em class="d-block mb-3" i18n>These automatic tags can be used to filter comments and videos.</em>

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -1,9 +1,11 @@
-<h1>
-  <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Video comments</ng-container>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon class="top--1px" iconName="message-circle" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Video comments</h1>
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
-</h1>
+  </div>
+</div>
 
 <em i18n>This view also shows comments from muted accounts.</em>
 

client/src/app/+admin/overview/comments/video-comment-list.component.scss

@@ -1,9 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-my-feed {
-  display: inline-block;
-  width: 15px;
-
-  @include margin-left(5px);
-}

client/src/app/+admin/overview/comments/video-comment-list.component.ts

@@ -8,7 +8,6 @@ import { VideoCommentListAdminOwnerComponent } from '../../../shared/shared-vide
 @Component({
   selector: 'my-video-comment-list',
   templateUrl: './video-comment-list.component.html',
-  styleUrls: [ './video-comment-list.component.scss' ],
   standalone: true,
   imports: [
     GlobalIconComponent,

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Users</ng-container>
-</h1>
+    <h1 i18n>Users</h1>
+  </div>
+</div>
 
 <p-table
   [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/overview/users/user-list/user-list.component.scss

@@ -3,6 +3,11 @@
 @use '_mixins' as *;
 @use 'bootstrap/scss/functions' as *;
 
+.sub-title-container my-global-icon {
+  position: relative;
+  top: -2px;
+}
+
 .banned-info {
   font-style: italic;
 }
@@ -20,10 +25,6 @@ p-tableCheckbox {
   top: -2.5px;
 }
 
-my-global-icon {
-  width: 18px;
-}
-
 @media screen and (max-width: $primeng-breakpoint) {
   .empty-cell {
     padding: 0;

client/src/app/+admin/overview/videos/video-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Videos</ng-container>
-</h1>
+    <h1 i18n>Videos</h1>
+  </div>
+</div>
 
 <p-table
   [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/debug/debug.component.html

@@ -1,5 +1,11 @@
-<div class="root">
-  <h4 i18n>IP address</h4>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Debug</h1>
+  </div>
+</div>
+
+<h2 class="fs-5" i18n>IP address</h2>
 
 <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
 
@@ -14,4 +20,3 @@
 <ul>
   <li i18n>Check the <code>trust_proxy</code> configuration key</li>
 </ul>
-</div>

client/src/app/+admin/system/debug/debug.component.ts

@@ -2,11 +2,15 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { Debug } from '@peertube/peertube-models'
 import { DebugService } from './debug.service'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 
 @Component({
   templateUrl: './debug.component.html',
   styleUrls: [ './debug.component.scss' ],
-  standalone: true
+  standalone: true,
+  imports: [
+    GlobalIconComponent
+  ]
 })
 export class DebugComponent implements OnInit {
   debug: Debug

client/src/app/+admin/system/jobs/jobs.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Local jobs</ng-container>
-</h1>
+    <h1 i18n>Local jobs</h1>
+  </div>
+</div>
 
 <div class="admin-sub-header">
   <div class="select-filter-block">

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -59,5 +59,5 @@ pre {
 }
 
 .job-error {
-  color: #ff0000;
+  color: pvar(--red);
 }

client/src/app/+admin/system/logs/logs.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Logs</ng-container>
-</h1>
+    <h1 i18n>Logs</h1>
+  </div>
+</div>
 
 <div class="header">
 

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html

@@ -1,14 +1,16 @@
-<h1 class="d-flex justify-content-between">
-  <span class="text-nowrap me-2">
-    <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
-    <span i18n>Runner jobs</span>
-  </span>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon class="top--1px" iconName="globe" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Runner jobs</h1>
+  </div>
 
+  <div>
     <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
       <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Remote runners</ng-container>
     </a>
-</h1>
+  </div>
+</div>
 
 <p-table
   [value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/runners/runner-list/runner-list.component.html

@@ -1,14 +1,16 @@
-<h1 class="d-flex justify-content-between">
-  <span class="text-nowrap me-2">
+<div class="sub-title-container">
+  <span class="sub-title">
     <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>Remote runners</ng-container>
+    <h1 i18n>Remote runners</h1>
   </span>
 
+  <div>
     <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
       <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Runner registration tokens</ng-container>
     </a>
-</h1>
+  </div>
+</div>
 
 <p-table
   [value]="runners" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html

@@ -1,7 +1,7 @@
-<h1 class="d-flex justify-content-between">
-  <span class="text-nowrap me-2">
+<div class="sub-title-container">
+  <span class="sub-title">
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>Runner registration tokens</ng-container>
+    <h1 i18n>Runner registration tokens</h1>
   </span>
 
   <div>
@@ -10,7 +10,7 @@
       <ng-container i18n>Remote runners</ng-container>
     </a>
   </div>
-</h1>
+</div>
 
 <p-table
   [value]="registrationTokens" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html

@@ -1,6 +1,8 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Reports</ng-container>
-</h1>
+    <h1 i18n>Reports</h1>
+  </div>
+</div>
 
 <my-abuse-list-table viewType="user"></my-abuse-list-table>

client/src/app/+my-account/my-account-applications/my-account-applications.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Applications</ng-container>
-</h1>
+    <h1 i18n>Applications</h1>
+  </div>
+</div>
 
 <div class="pt-two-cols"> <!-- built-in token grid -->
 

client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Your automatic tag policies</ng-container>
-</h1>
+    <h1 i18n>Your automatic tag policies</h1>
+  </div>
+</div>
 
 <strong class="d-block mb-3" i18n>Automatically block comments:</strong>
 

client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Comments on your videos</ng-container>
-</h1>
+    <h1 i18n>Comments on your videos</h1>
+  </div>
+</div>
 
 <my-video-comment-list-admin-owner mode="user"></my-video-comment-list-admin-owner>
 

client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Import/Export</ng-container>
-</h1>
+    <h1 i18n>Import/Export</h1>
+  </div>
+</div>
 
 <my-account-import #accountImport [videoQuotaUsed]="videoQuotaUsed" class="d-block mb-5"></my-account-import>
 

client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html

@@ -1,4 +1,9 @@
-<h1 class="visually-hidden" i18n>Notifications</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="bell" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Notifications</h1>
+  </div>
+</div>
 
 <div class="header">
   <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Two factor authentication</ng-container>
-</h1>
+    <h1 i18n>Two factor authentication</h1>
+  </div>
+</div>
 
 <div i18n *ngIf="twoFactorAlreadyEnabled === true" class="root already-enabled">
   Two factor authentication is already enabled.

client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Your watched words lists</ng-container>
-</h1>
+    <h1 i18n>Your watched words lists</h1>
+  </div>
+</div>
 
 <em class="d-block" i18n>Comments that contain any of the watched words are automatically tagged with the name of the list.</em>
 <em class="d-block mb-3" i18n>These automatic tags can be used to filter comments or <a routerLink="/my-account/auto-tag-policies">automatically block</a> them.</em>

client/src/app/+my-library/+my-video-channels/my-video-channels.component.html

@@ -1,17 +1,17 @@
-<h1>
-  <span class="text-nowrap me-2">
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My channels</ng-container>
-    <span *ngIf="this.pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ this.pagination.totalItems }}</span>
-  </span>
+    <h1 i18n>My channels</h1>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
+  </div>
 
   <div>
-    <a routerLink="/my-library/video-channel-syncs" class="button-link">
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link grey-button peertube-button-icon">
       <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My synchronizations</ng-container>
     </a>
   </div>
-</h1>
+</div>
 
 <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
 

client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss

@@ -1,19 +1,9 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-h1 {
-  display: flex;
-  justify-content: space-between;
-
-  my-global-icon {
-    top: -4px;
-  }
-
-  .button-link {
-    @include peertube-button-link;
-    @include grey-button;
-    @include button-with-icon(18px, 3px, -1px);
-  }
+.sub-title my-global-icon {
+  position: relative;
+  top: -3px;
 }
 
 input[type=text] {

client/src/app/+my-library/my-follows/my-followers.component.html

@@ -1,11 +1,10 @@
-<div class="d-flex">
-  <h1 class="text-nowrap">
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My followers</ng-container>
-  </h1>
-
+    <h1 i18n>My followers</h1>
     <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </div>
+</div>
 
 <div class="followers-header">
   <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>

client/src/app/+my-library/my-follows/my-subscriptions.component.html

@@ -1,12 +1,12 @@
-<h1>
-  <span class="text-nowrap me-2">
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My subscriptions</ng-container>
+    <h1 i18n>My subscriptions</h1>
     <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
-  </span>
-</h1>
+  </div>
+</div>
 
-<div class="video-subscriptions-header">
+<div class="mb-3">
   <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
 </div>
 

client/src/app/+my-library/my-follows/my-subscriptions.component.scss

@@ -2,11 +2,6 @@
 @use '_mixins' as *;
 @use '_actor' as *;
 
-.video-subscriptions-header {
-  margin-bottom: 30px;
-  display: flex;
-}
-
 input[type=text] {
   @include peertube-input-text(300px);
 }

client/src/app/+my-library/my-history/my-history.component.html

@@ -1,8 +1,10 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My watch history</ng-container>
+    <h1 i18n>My watch history</h1>
     <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
-</h1>
+  </div>
+</div>
 
 <div class="top-buttons">
   <div class="search-wrapper">

client/src/app/+my-library/my-ownership/my-ownership.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My ownership changes</ng-container>
-</h1>
+    <h1 i18n>My ownership changes</h1>
+  </div>
+</div>
 
 <p-table
   [value]="videoChangeOwnerships" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"

client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html

@@ -1,9 +1,11 @@
 <my-alert *ngIf="error" type="danger">{{ error }}</my-alert>
 
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My synchronizations</ng-container>
-</h1>
+  </div>
+</div>
 
 <div *ngIf="!syncEnabled()">
   <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>

client/src/app/+my-library/my-video-imports/my-video-imports.component.html

@@ -1,14 +1,16 @@
-<h1 class="d-flex justify-content-between">
-  <span>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My imports</ng-container>
-  </span>
+    <h1 i18n>My imports</h1>
+  </div>
 
-  <a routerLink="/my-library/video-channel-syncs" class="button-link">
+  <div>
+    <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link grey-button">
       <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My synchronizations</ng-container>
     </a>
-</h1>
+  </div>
+</div>
 
 <div class="mb-4 d-flex justify-content-between">
   <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>

client/src/app/+my-library/my-video-imports/my-video-imports.component.scss

@@ -6,11 +6,5 @@ pre {
 }
 
 .video-import-error {
-  color: #ff0000;
-}
-
-.button-link {
-  @include peertube-button-link;
-  @include grey-button;
-  @include button-with-icon(18px, 3px, -1px);
+  color: pvar(--red);
 }

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html

@@ -1,8 +1,10 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My playlists</ng-container>
+    <h1 i18n>My playlists</h1>
     <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
-</h1>
+  </div>
+</div>
 
 <my-channels-setup-message></my-channels-setup-message>
 

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

@@ -1,10 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-h1 {
-  display: flex;
-}
-
 input[type=text] {
   @include peertube-input-text(300px);
 }

client/src/app/+my-library/my-videos/my-videos.component.html

@@ -1,22 +1,22 @@
-<h1>
-  <span class="text-nowrap me-2">
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My videos</ng-container>
+    <h1 i18n>My videos</h1>
     <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
-  </span>
+  </div>
 
   <div>
-    <a routerLink="/my-library/video-imports" class="button-link">
+    <a routerLink="/my-library/video-imports" class="peertube-button-link grey-button peertube-button-icon me-2">
       <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
       <ng-container i18n>My imports</ng-container>
     </a>
 
-    <a routerLink="/my-library/ownership" class="button-link">
+    <a routerLink="/my-library/ownership" class="peertube-button-link grey-button peertube-button-icon">
       <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
       <ng-container i18n>Ownership changes</ng-container>
     </a>
   </div>
-</h1>
+</div>
 
 <div class="videos-header d-flex justify-content-between gap-2">
   <my-advanced-input-filter [emitOnInit]="false" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>

client/src/app/+my-library/my-videos/my-videos.component.scss

@@ -10,21 +10,6 @@ input[type=text] {
   @include margin-left(0.5rem);
 }
 
-h1 {
-  display: flex;
-  justify-content: space-between;
-
-  .button-link {
-    @include peertube-button-link;
-    @include grey-button;
-    @include button-with-icon(18px, 3px, -1px);
-
-    &:not(:last-child) {
-      @include margin-right(10px);
-    }
-  }
-}
-
 .action-button-delete-selection {
   display: inline-block;
 

client/src/app/shared/shared-moderation/account-blocklist.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="user-x" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Muted accounts</ng-container>
-</h1>
+    <h1 i18n>Muted accounts</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"

client/src/app/shared/shared-moderation/server-blocklist.component.html

@@ -1,7 +1,9 @@
-<h1>
+<div class="sub-title-container">
+  <div class="sub-title">
     <my-global-icon iconName="peertube-x" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Muted servers</ng-container>
-</h1>
+    <h1 i18n>Muted servers</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"

client/src/sass/class-helpers/_position.scss

@@ -0,0 +1,19 @@
+.top--1px {
+  position: relative;
+  top: -1px;
+}
+
+.top-1px {
+  position: relative;
+  top: 1px;
+}
+
+.top--2px {
+  position: relative;
+  top: -2px;
+}
+
+.top-2px {
+  position: relative;
+  top: 2px;
+}

client/src/sass/class-helpers/index.scss

@@ -6,3 +6,4 @@
 @use './_menu';
 @use './_text';
 @use './_layout';
+@use './_position';

client/src/sass/include/_mixins.scss

@@ -642,26 +642,52 @@
 }
 
 @mixin sub-menu-h1 {
-  ::ng-deep h1 {
-    font-size: 1.3rem;
+  ::ng-deep .sub-title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
     border-bottom: 2px solid $grey-background-color;
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
-    > span > my-global-icon,
+    > * {
+      gap: 0.5rem;
+      display: flex;
+      align-items: center;
+    }
+
+    .sub-title {
+      &,
+      h1 {
+        font-size: 1.3rem;
+      }
+
+      h1 {
+        margin: 0;
+      }
+
       > my-global-icon {
         width: 24px;
         height: 24px;
-      position: relative;
-      top: -2px;
 
-      @include margin-right(10px);
+        svg {
+          vertical-align: initial;
+        }
       }
 
-    .pt-badge {
-      vertical-align: top;
+      my-feed {
+        display: inline-block;
+        width: 15px;
 
-      @include margin-left(7px);
+        my-global-icon svg {
+          vertical-align: initial;
+          position: relative;
+          top: 1px;
+        }
+      }
     }
   }
 }