Improve admin tables responsive

2 files changed, 11 insertions, 1 deletions

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 5b4f35c77..c82f3c06f 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -74,7 +74,7 @@
         <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell">
+      <td class="expand-cell" [ngClass]="{ 'empty-cell': !user.blockedReason }">
         <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user">
           <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
         </span>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 4f6c60f8f..e425306b5 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -53,3 +53,13 @@ my-global-icon {
   width: auto;
   max-width: 100%;
 }
+
+@media screen and (max-width: $primeng-breakpoint) {
+  .progress {
+    width: 100%;
+  }
+
+  .empty-cell {
+    padding: 0;
+  }
+}