X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-main%2Fbuttons%2Fbutton.component.scss;h=22b24c853e2434434a0d7f688a9c77fdd564c681;hb=8beea2d37d90e9a12d895f4a9eebc1e532313d8c;hp=3ccfefd7e022eedadabc5ab51daf54de53c31e18;hpb=67ed6552b831df66713bac9e672738796128d33f;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 3ccfefd7e..22b24c853 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,15 +1,36 @@
 @import '_variables';
 @import '_mixins';
 
+@mixin responsive-label {
+  .action-button {
+    padding: 0 13px;
+  }
+
+  .button-label {
+    display: none;
+  }
+}
+
+:host {
+  outline: none;
+}
+
 my-small-loader ::ng-deep .root {
   display: inline-block;
   margin: 0 3px 0 0;
   width: 20px;
 }
 
+a[class$=-button],
+span[class$=-button] {
+  > span {
+    margin-left: 5px;
+  }
+}
+
 .action-button {
   @include peertube-button-link;
-  @include button-with-icon(21px, 0, -2px);
+  @include button-with-icon(21px);
 }
 
 .orange-button {
@@ -35,12 +56,12 @@ my-small-loader ::ng-deep .root {
 // In a table, try to minimize the space taken by this button
 @media screen and (max-width: 1400px) {
   :host-context(td) {
-    .action-button {
-      padding: 0 13px;
-    }
+    @include responsive-label;
+  }
+}
 
-    .button-label {
-      display: none;
-    }
+@media screen and (max-width: $small-view) {
+  .responsive-label {
+    @include responsive-label;
   }
 }