From 38d38c0e7a59ceba8d306bdecb854a67a75e39f7 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 27 Nov 2024 14:59:24 +0100
Subject: [PATCH] Fix help button position

---
 .../user-video-settings.component.html        | 35 +++++++++++--------
 client/src/sass/application.scss              | 10 ++++++
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 7789ffaec..bdfea2f02 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -1,14 +1,18 @@
 <form (ngSubmit)="updateDetails()" [formGroup]="form">
   <div class="form-group">
     <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
-    <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
-    <my-help>
-      <ng-template ptTemplate="customHtml">
-        <ng-container i18n>
-          With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
-        </ng-container>
-      </ng-template>
-    </my-help>
+
+    <div class="pt-label-container">
+      <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
+
+      <my-help>
+        <ng-template ptTemplate="customHtml">
+          <ng-container i18n>
+            With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+          </ng-container>
+        </ng-template>
+      </my-help>
+    </div>
 
     <div class="peertube-select-container">
       <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
@@ -22,12 +26,15 @@
 
   <div class="form-group">
     <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
-    <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
-    <my-help>
-      <ng-template ptTemplate="customHtml">
-        <ng-container i18n>In Recently added, Trending, Local, Most liked and Search pages</ng-container>
-      </ng-template>
-    </my-help>
+
+    <div class="pt-label-container">
+      <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
+      <my-help>
+        <ng-template ptTemplate="customHtml">
+          <ng-container i18n>In Recently added, Trending, Local, Most liked and Search pages</ng-container>
+        </ng-template>
+      </my-help>
+    </div>
 
     <div>
       <my-select-languages inputId="videoLanguages" [maxLanguages]="20" formControlName="videoLanguages"></my-select-languages>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index e7b427744..033136576 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -207,6 +207,16 @@ label,
   color: pvar(--fg-350);
 }
 
+.pt-label-container {
+  margin-bottom: 0.5rem;
+
+  label {
+    display: inline;
+
+    @include margin-right(0.25rem);
+  }
+}
+
 code {
   background-color: pvar(--bg-secondary-500);
   color: pvar(--fg-400);