Fix add to playlist button width

2 files changed, 8 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index 4aaccd50d..00eed14d3 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -24,7 +24,10 @@
           {{ playlist.displayName }}
         </label>
 
-        <button class="optional-row-icon button-unstyle" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)">
+        <button
+          class="optional-row-icon button-unstyle" [ngClass]="{ 'invisible': !isPrimaryCheckboxChecked(playlist) }"
+          (click)="$event.stopPropagation(); toggleOptionalRow(playlist)"
+        >
           <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
         </button>
       </button>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index d1aa95266..25c7b4525 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -50,6 +50,7 @@
 
 .primary-row {
   display: flex;
+  width: 100%;
 
   my-peertube-checkbox {
     @include margin-right(10px);
@@ -67,7 +68,7 @@
   }
 
   .optional-row-icon {
-    @include margin-left(5px);
+    @include margin-left(0.5rem);
 
     display: flex;
     align-items: center;
@@ -78,6 +79,8 @@
       @include apply-svg-color(#333);
       @include margin-right(0);
 
+      position: relative;
+      top: 1px;
       width: 19px;
       height: 19px;
     }