From 714f7aebad5d664f8964fae95f07808e2df2caef Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 3 Oct 2024 14:02:54 +0200
Subject: [PATCH] Cleanup sub title CSS

---
 .../followers-list.component.html             | 10 ++--
 .../following-list.component.html             | 10 ++--
 .../video-redundancies-list.component.html    | 10 ++--
 .../abuse-list/abuse-list.component.html      | 10 ++--
 .../registration-list.component.html          | 10 ++--
 .../video-block-list.component.html           | 10 ++--
 .../video-block-list.component.scss           |  7 ---
 .../video-block-list.component.ts             |  2 +-
 .../watched-words-list-admin.component.html   | 10 ++--
 .../video-comment-list.component.html         | 14 ++---
 .../video-comment-list.component.scss         |  9 ----
 .../comments/video-comment-list.component.ts  |  1 -
 .../users/user-list/user-list.component.html  | 10 ++--
 .../users/user-list/user-list.component.scss  |  9 ++--
 .../overview/videos/video-list.component.html | 10 ++--
 .../+admin/system/debug/debug.component.html  | 33 +++++++-----
 .../+admin/system/debug/debug.component.ts    |  6 ++-
 .../+admin/system/jobs/jobs.component.html    | 10 ++--
 .../+admin/system/jobs/jobs.component.scss    |  2 +-
 .../+admin/system/logs/logs.component.html    | 10 ++--
 .../runner-job-list.component.html            | 24 +++++----
 .../runner-list/runner-list.component.html    | 18 ++++---
 ...ner-registration-token-list.component.html |  8 +--
 .../my-account-abuses-list.component.html     | 10 ++--
 .../my-account-applications.component.html    | 10 ++--
 ...y-account-auto-tag-policies.component.html | 10 ++--
 .../comments-on-my-videos.component.html      | 10 ++--
 .../my-account-import-export.component.html   | 10 ++--
 .../my-account-notifications.component.html   |  7 ++-
 .../my-account-two-factor.component.html      | 10 ++--
 ...-account-watched-words-list.component.html | 10 ++--
 .../my-video-channels.component.html          | 14 ++---
 .../my-video-channels.component.scss          | 16 ++----
 .../my-follows/my-followers.component.html    | 11 ++--
 .../my-subscriptions.component.html           | 12 ++---
 .../my-subscriptions.component.scss           |  5 --
 .../my-history/my-history.component.html      | 12 +++--
 .../my-ownership/my-ownership.component.html  | 10 ++--
 .../my-video-channel-syncs.component.html     | 10 ++--
 .../my-video-imports.component.html           | 20 +++----
 .../my-video-imports.component.scss           |  8 +--
 .../my-video-playlists.component.html         | 12 +++--
 .../my-video-playlists.component.scss         |  4 --
 .../my-videos/my-videos.component.html        | 14 ++---
 .../my-videos/my-videos.component.scss        | 15 ------
 .../account-blocklist.component.html          | 10 ++--
 .../server-blocklist.component.html           | 10 ++--
 client/src/sass/class-helpers/_position.scss  | 19 +++++++
 client/src/sass/class-helpers/index.scss      |  1 +
 client/src/sass/include/_mixins.scss          | 54 ++++++++++++++-----
 50 files changed, 318 insertions(+), 259 deletions(-)
 delete mode 100644 client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
 delete mode 100644 client/src/app/+admin/overview/comments/video-comment-list.component.scss
 create mode 100644 client/src/sass/class-helpers/_position.scss

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 60fe3813174..8bb1871ddeb 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Followers of your instance</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Followers of your instance</h1>
+  </div>
+</div>
 
 <p-table
   [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 9404ba3482c..ebfe34f8b82 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Subscriptions of your instance</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Subscriptions of your instance</h1>
+  </div>
+</div>
 
 <p-table
   [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index babcce6d314..7ded2a6f97d 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Videos redundancies</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Videos redundancies</h1>
+  </div>
+</div>
 
 <div class="admin-sub-header">
   <div class="select-filter-block">
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
index a9e0931f828..6603252386e 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -1,6 +1,8 @@
-<h1>
-  <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Reports</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Reports</h1>
+  </div>
+</div>
 
 <my-abuse-list-table viewType="admin"></my-abuse-list-table>
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.html b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
index d0926d96eb5..7e7a823c3c9 100644
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Registration requests</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Registration requests</h1>
+  </div>
+</div>
 
 <p-table
   [value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 7c3903688de..9ac8edb7ff7 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Video blocks</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Video blocks</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
deleted file mode 100644
index a02b10c8493..00000000000
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-my-global-icon {
-  width: 24px;
-  height: 24px;
-}
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index f04ac769be1..c033cff690e 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/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,
diff --git a/client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html b/client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html
index 230cd365f4c..99b711b8abc 100644
--- a/client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html
+++ b/client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Instance watched words lists</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
+    <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>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 0b87f0f38b5..8b6a7d7db12 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/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>
-
-  <my-feed [syndicationItems]="syndicationItems"></my-feed>
-</h1>
+<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>
+  </div>
+</div>
 
 <em i18n>This view also shows comments from muted accounts.</em>
 
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.scss b/client/src/app/+admin/overview/comments/video-comment-list.component.scss
deleted file mode 100644
index bd69b11f0ff..00000000000
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-my-feed {
-  display: inline-block;
-  width: 15px;
-
-  @include margin-left(5px);
-}
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
index 5d5e7b89d2d..e10573e5810 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.ts
+++ b/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,
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 9e56da40f67..21ec15efed2 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Users</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Users</h1>
+  </div>
+</div>
 
 <p-table
   [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index a56d774e14d..9b9502ffea6 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/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;
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index cf1b272cc67..f82d5363b3e 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Videos</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Videos</h1>
+  </div>
+</div>
 
 <p-table
   [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/system/debug/debug.component.html b/client/src/app/+admin/system/debug/debug.component.html
index 695c3e4ea36..465e662d64a 100644
--- a/client/src/app/+admin/system/debug/debug.component.html
+++ b/client/src/app/+admin/system/debug/debug.component.html
@@ -1,17 +1,22 @@
-<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>
 
-  <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
+<h2 class="fs-5" i18n>IP address</h2>
 
-  <p i18n>If this is not your correct public IP, please consider fixing it because:</p>
-  <ul>
-    <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
-    <li i18n>Anti brute force system could be overzealous</li>
-    <li i18n>P2P system could not work correctly</li>
-  </ul>
+<p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
 
-  <p i18n>To fix it:<p>
-  <ul>
-    <li i18n>Check the <code>trust_proxy</code> configuration key</li>
-  </ul>
-</div>
+<p i18n>If this is not your correct public IP, please consider fixing it because:</p>
+<ul>
+  <li i18n>Views may not be counted correctly (reduced compared to what they should be)</li>
+  <li i18n>Anti brute force system could be overzealous</li>
+  <li i18n>P2P system could not work correctly</li>
+</ul>
+
+<p i18n>To fix it:<p>
+<ul>
+  <li i18n>Check the <code>trust_proxy</code> configuration key</li>
+</ul>
diff --git a/client/src/app/+admin/system/debug/debug.component.ts b/client/src/app/+admin/system/debug/debug.component.ts
index dc29f1bbc8a..0b800b56153 100644
--- a/client/src/app/+admin/system/debug/debug.component.ts
+++ b/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
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 40017cf1e92..2c343eb9484 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Local jobs</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Local jobs</h1>
+  </div>
+</div>
 
 <div class="admin-sub-header">
   <div class="select-filter-block">
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 94a5fd53a5b..5b16c1a9877 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -59,5 +59,5 @@ pre {
 }
 
 .job-error {
-  color: #ff0000;
+  color: pvar(--red);
 }
diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
index 28e8fde26f3..dee0fe5f56d 100644
--- a/client/src/app/+admin/system/logs/logs.component.html
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Logs</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Logs</h1>
+  </div>
+</div>
 
 <div class="header">
 
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
index ae383f1d3fb..ec026025b07 100644
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/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>
-
-  <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 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>
+  </div>
+</div>
 
 <p-table
   [value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
index a95be380280..1a4913a3157 100644
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/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>
 
-  <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>
+    <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>
+  </div>
+</div>
 
 <p-table
   [value]="runners" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"
diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
index 72e2a1978ee..9c2d5529137 100644
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/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 @@ <h1 class="d-flex justify-content-between">
       <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"
diff --git a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
index e83b59019a4..48371bf483d 100644
--- a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
+++ b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
@@ -1,6 +1,8 @@
-<h1>
-  <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Reports</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Reports</h1>
+  </div>
+</div>
 
 <my-abuse-list-table viewType="user"></my-abuse-list-table>
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 35504888199..63d3fae2083 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Applications</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Applications</h1>
+  </div>
+</div>
 
 <div class="pt-two-cols"> <!-- built-in token grid -->
 
diff --git a/client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html b/client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html
index 8aa15f87286..d1c6c071234 100644
--- a/client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html
+++ b/client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Your automatic tag policies</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Your automatic tag policies</h1>
+  </div>
+</div>
 
 <strong class="d-block mb-3" i18n>Automatically block comments:</strong>
 
diff --git a/client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html b/client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html
index 265767cb849..597acee1782 100644
--- a/client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html
+++ b/client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Comments on your videos</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Comments on your videos</h1>
+  </div>
+</div>
 
 <my-video-comment-list-admin-owner mode="user"></my-video-comment-list-admin-owner>
 
diff --git a/client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html b/client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html
index c4c0c9c53f1..aefcddf3a0c 100644
--- a/client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html
+++ b/client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Import/Export</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Import/Export</h1>
+  </div>
+</div>
 
 <my-account-import #accountImport [videoQuotaUsed]="videoQuotaUsed" class="d-block mb-5"></my-account-import>
 
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index dd244ec008f..dec372636fc 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/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">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
index 7260916b679..eefd3150174 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Two factor authentication</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Two factor authentication</h1>
+  </div>
+</div>
 
 <div i18n *ngIf="twoFactorAlreadyEnabled === true" class="root already-enabled">
   Two factor authentication is already enabled.
diff --git a/client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html b/client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html
index 132bf5a699c..0f01ea56596 100644
--- a/client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html
+++ b/client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Your watched words lists</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
+    <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>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index c3f7eb42ea5..d4d1c093130 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/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>
 
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 7034ff9bfe0..8367ef2dd66 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/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] {
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index 43d0267d47b..205c2473c88 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -1,10 +1,9 @@
-<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>
-
-  <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <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">
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index b10a9560352..547eb8c734a 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/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>
 
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.scss b/client/src/app/+my-library/my-follows/my-subscriptions.component.scss
index 310e11cb081..ffb55abae4a 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.scss
+++ b/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);
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 7203ba52954..e41a2ba2ab8 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,8 +1,10 @@
-<h1>
-  <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My watch history</ng-container>
-  <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
+    <h1 i18n>My watch history</h1>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
+  </div>
+</div>
 
 <div class="top-buttons">
   <div class="search-wrapper">
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index daf2dec1102..e151415a6bd 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My ownership changes</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
+    <h1 i18n>My ownership changes</h1>
+  </div>
+</div>
 
 <p-table
   [value]="videoChangeOwnerships" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
index 082f8e34faf..e271fb9278c 100644
--- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
+++ b/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>
-  <my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My synchronizations</ng-container>
-</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>
+  </div>
+</div>
 
 <div *ngIf="!syncEnabled()">
   <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 1d0671a326e..2d7e603b701 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/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">
-    <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My synchronizations</ng-container>
-  </a>
-</h1>
+  <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>
+  </div>
+</div>
 
 <div class="mb-4 d-flex justify-content-between">
   <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
index d9b12151ead..90053405215 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
+++ b/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);
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index 6bbbf01cab5..fd326e03ce9 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,10 @@
-<h1>
-  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My playlists</ng-container>
-  <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+    <h1 i18n>My playlists</h1>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
+  </div>
+</div>
 
 <my-channels-setup-message></my-channels-setup-message>
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 962e2b27164..b8cd3535940 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/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);
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index b8092fb77c8..a39f88e1c85 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/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>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index c131fc8e9fe..9a2af6ac9d8 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/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;
 
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 951db6133ff..65fde65e40d 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="user-x" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Muted accounts</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="user-x" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Muted accounts</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 5a7ef984be2..59ebc85f2a3 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -1,7 +1,9 @@
-<h1>
-  <my-global-icon iconName="peertube-x" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>Muted servers</ng-container>
-</h1>
+<div class="sub-title-container">
+  <div class="sub-title">
+    <my-global-icon iconName="peertube-x" aria-hidden="true"></my-global-icon>
+    <h1 i18n>Muted servers</h1>
+  </div>
+</div>
 
 <p-table
   [value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"
diff --git a/client/src/sass/class-helpers/_position.scss b/client/src/sass/class-helpers/_position.scss
new file mode 100644
index 00000000000..e3a6f386dda
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/sass/class-helpers/index.scss b/client/src/sass/class-helpers/index.scss
index daa3399409f..c9c8dcba74a 100644
--- a/client/src/sass/class-helpers/index.scss
+++ b/client/src/sass/class-helpers/index.scss
@@ -6,3 +6,4 @@
 @use './_menu';
 @use './_text';
 @use './_layout';
+@use './_position';
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 737eeb4c584..1420b8a9d81 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/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,
-    > my-global-icon {
-      width: 24px;
-      height: 24px;
-      position: relative;
-      top: -2px;
-
-      @include margin-right(10px);
+    > * {
+      gap: 0.5rem;
+      display: flex;
+      align-items: center;
     }
 
-    .pt-badge {
-      vertical-align: top;
-
-      @include margin-left(7px);
+    .sub-title {
+      &,
+      h1 {
+        font-size: 1.3rem;
+      }
+
+      h1 {
+        margin: 0;
+      }
+
+      > my-global-icon {
+        width: 24px;
+        height: 24px;
+
+        svg {
+          vertical-align: initial;
+        }
+      }
+
+      my-feed {
+        display: inline-block;
+        width: 15px;
+
+        my-global-icon svg {
+          vertical-align: initial;
+          position: relative;
+          top: 1px;
+        }
+      }
     }
   }
 }