Fix broken delete buttons of admin federation lists (#4378)

* Add ellipsis on my-delete button of federation admin

* Add ellipsis on button label to define (max-)width on host component

Co-authored-by: Ms Kimsible <kimsible@users.noreply.github.com>

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index c29b20493da225aec77bc8f64197f195a90684d2..3a7bf2ef8b5aef64234ea3becce7fecec3938768 100644 (file)
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -21,3 +21,7 @@ a {
     @include margin-right(10px);
   }
 }
+
+my-delete-button {
+  max-width: 130px;
+}

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 75b0efca85355f7de8f079275ebb4243f6bd4d5b..c734692957bf2a6ba6c20f34971350c7519ef590 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -38,7 +38,7 @@
   <ng-template pTemplate="body" let-follow>
     <tr>
       <td class="action-cell">
-        <my-delete-button label="Unfollow" i18n-label (click)="removeFollowing(follow)"></my-delete-button>
+        <my-delete-button label (click)="removeFollowing(follow)"></my-delete-button>
       </td>
       <td>
         <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index ef24b38cc5554b0c06423037720303c98a170ac4..0de80e563582265949897cb1dd865958c53a8625 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -19,3 +19,7 @@ a {
 .follow-button {
   @include create-button;
 }
+
+my-delete-button {
+  max-width: 130px;
+}

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..c782ac3ef218b55b27af2163f2bfb9298e0facce 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,8 @@ 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
 }
 
 .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) {