X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-main%2Fbuttons%2Fbutton.component.scss;h=c782ac3ef218b55b27af2163f2bfb9298e0facce;hb=7137377d097a74087ed062c8071c1aa5c717c7f7;hp=22b24c853e2434434a0d7f688a9c77fdd564c681;hpb=ad35265d743e621d86f3f0796dd9d8795c599dca;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 22b24c853..c782ac3ef 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin responsive-label {
   .action-button {
@@ -13,6 +13,7 @@
 
 :host {
   outline: none;
+  display: inline-block;
 }
 
 my-small-loader ::ng-deep .root {
@@ -24,13 +25,15 @@ my-small-loader ::ng-deep .root {
 a[class$=-button],
 span[class$=-button] {
   > span {
-    margin-left: 5px;
+    @include margin-left(5px);
   }
 }
 
 .action-button {
   @include peertube-button-link;
   @include button-with-icon(21px);
+
+  width: 100%; // useful for ellipsis, allow to define a max-width on host component
 }
 
 .orange-button {
@@ -53,6 +56,10 @@ span[class$=-button] {
   @include grey-button;
 }
 
+.button-label {
+  @include ellipsis;
+}
+
 // In a table, try to minimize the space taken by this button
 @media screen and (max-width: 1400px) {
   :host-context(td) {