From 635e872be30cf0fa5ac6a1eb387df6c223c0311a Mon Sep 17 00:00:00 2001
From: t1enne <65537403+t1enne@users.noreply.github.com>
Date: Fri, 22 Apr 2022 22:03:06 +0200
Subject: [PATCH] changed followers tab to 24 per page (#1855)

* changed followers tab to 24 per page

* Update followers.js

fixed noFollowers message not spanning
---
 webroot/js/components/federation/followers.js | 6 +++---
 webroot/styles/app.css                        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/webroot/js/components/federation/followers.js b/webroot/js/components/federation/followers.js
index 89825af62..fd4b2b6a3 100644
--- a/webroot/js/components/federation/followers.js
+++ b/webroot/js/components/federation/followers.js
@@ -24,7 +24,7 @@ export default class FollowerList extends Component {
 
   async getFollowers() {
     const { currentPage } = this.state;
-    const limit = 16;
+    const limit = 24;
     const offset = currentPage * limit;
     const u = `${URL_FOLLOWERS}?offset=${offset}&limit=${limit}`;
     const response = await fetch(u);
@@ -47,7 +47,7 @@ export default class FollowerList extends Component {
       return null;
     }
 
-    const noFollowersInfo = html`<div>
+    const noFollowersInfo = html`<div class="col-span-4">
       <p class="mb-5 text-2xl">Be the first to follow this live stream.</p>
       <p class="text-md">
         By following this stream you'll get updates when it goes live, receive
@@ -81,7 +81,7 @@ export default class FollowerList extends Component {
 
     return html`
       <div>
-        <div class="flex flex-wrap">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           ${followers.length === 0 && noFollowersInfo}
           ${followers.map((follower) => {
             return html` <${SingleFollower} user=${follower} /> `;
diff --git a/webroot/styles/app.css b/webroot/styles/app.css
index 1c86989b6..425023db2 100644
--- a/webroot/styles/app.css
+++ b/webroot/styles/app.css
@@ -558,7 +558,7 @@ header {
 }
 
 .following-list-follower {
-  width: 280px;
+  width: auto;
 }
 
 #follow-loading-spinner-container {