Merge branch 'release/4.2.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / buttons / button.component.scss

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 e74ba0221654a88f20b2bdf372c986127284a42f..c53b8f2e50a463dcae30e88c8e796738c68a8436 100644 (file)
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -13,6 +13,7 @@
 
 :host {
   outline: none;
+  display: inline-block;
 }
 
 my-small-loader ::ng-deep .root {
@@ -31,6 +32,14 @@ span[class$=-button] {
 .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
+
+  &.icon-only {
+    my-global-icon {
+      margin: 0;
+    }
+  }
 }
 
 .orange-button {
@@ -53,6 +62,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) {