From d411d2107da9de8f3a46541cb7aea5fd71f9ea4e Mon Sep 17 00:00:00 2001
From: Markus Huggler <markus.huggler@novaloop.ch>
Date: Fri, 23 Dec 2022 11:48:48 +0100
Subject: [PATCH] feat: fix column widths in table view

---
 .../followings-table/table/table.component.html   | 14 +++++++++-----
 .../followings-table/table/table.component.scss   | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/projects/mastolists/src/app/followings-table/table/table.component.html b/projects/mastolists/src/app/followings-table/table/table.component.html
index 82c5cbb..5565d6c 100644
--- a/projects/mastolists/src/app/followings-table/table/table.component.html
+++ b/projects/mastolists/src/app/followings-table/table/table.component.html
@@ -14,7 +14,7 @@
                 <th>Actions</th>
             </tr>
             <tr *ngFor="let row of rows$ |async">
-                <td>
+                <td class="col small">
                     <a [href]="row.url">
                         <nb-user
                             size="medium"
@@ -26,9 +26,13 @@
                         </nb-user>
                     </a>
                 </td>
-                <td><span [innerHTML]="row.note"></span></td>
-                <td><span [innerHTML]="row.fields"></span></td>
-                <td>
+                <td class="col large">
+                    <span [innerHTML]="row.note"></span>
+                </td>
+                <td class="col large">
+                    <span [innerHTML]="row.fields"></span>
+                </td>
+                <td class="col medium">
                     <div *ngFor="let list of row.lists">
                         {{list.title}}
                         <nb-icon icon="person-remove-outline" (click)="removeAccountFromList(row.id, list.id)">
@@ -36,7 +40,7 @@
                         </nb-icon>
                     </div>
                 </td>
-                <td>
+                <td class="col medium">
                     <div class="actions">
                         <select class="list-select" #listSelect>
                             <option *ngFor="let list of lists$ | async" [value]="list.id">{{list.title}}</option>
diff --git a/projects/mastolists/src/app/followings-table/table/table.component.scss b/projects/mastolists/src/app/followings-table/table/table.component.scss
index 8d22133..47a7af4 100644
--- a/projects/mastolists/src/app/followings-table/table/table.component.scss
+++ b/projects/mastolists/src/app/followings-table/table/table.component.scss
@@ -13,6 +13,21 @@ table {
     td {
         border: 1pt solid #101426;
     }
+
+    td.col {
+        &.small {
+            min-width: 180px;
+        }
+        &.medium {
+            min-width: 300px;
+        }
+        &.large {
+            min-width: 400px;
+        }
+        max-width: calc(100vw / 3);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 div.actions {