Unverified Commit b16e0cf2 authored by Ms Kimsible's avatar Ms Kimsible Committed by GitHub
Browse files

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: default avatarMs Kimsible <kimsible@users.noreply.github.com>
parent fb72d2e1
......@@ -21,3 +21,7 @@ a {
@include margin-right(10px);
}
}
my-delete-button {
max-width: 130px;
}
......@@ -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">
......
......@@ -19,3 +19,7 @@ a {
.follow-button {
@include create-button;
}
my-delete-button {
max-width: 130px;
}
......@@ -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) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment