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

@@ -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} /> `;

webroot/styles/app.css

@@ -558,7 +558,7 @@ header {
 }
 
 .following-list-follower {
-  width: 280px;
+  width: auto;
 }
 
 #follow-loading-spinner-container {