Update follower cards to have better responsive design (#4198)

* change a follower's name to be very long

* Add more media query and make the entire row match the tallest card

* fix lint in followerCollection file

* make media queries easier to read

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -3,17 +3,14 @@
 .followers {
   width: 100%;
   padding: 5px;
+  margin: 0 auto;
   min-height: 20vh;
 
   .followerRow {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 16px 0;
-  }
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-
+    grid-auto-rows: min-content;
-  @media (width <= 900px) {
-    .followerRow {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
   }
 
   @include screen(mobile) {
@@ -22,6 +19,24 @@
       justify-content: center;
     }
   }
+
+  @media (640px <= width < 960px) {
+    .followerRow {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (960px <= width < 1280px) {
+    .followerRow {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (width >= 1280px) {
+    .followerRow {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
 }
 
 .noFollowers {

web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx

@@ -101,9 +101,9 @@ const mocks = {
               disabledAt: null,
             },
             {
-              link: 'https://gamethattune.club/users/thelinkfloyd',
+              link: 'https://gamethattune.club/users/fourthwall',
-              name: 'thelinkfloyd',
+              name: ':fourthwall: █████ :fourthwall: (( MagmaSys ))',
-              username: 'thelinkfloyd@gamethattune.club',
+              username: 'EnlightenmentSurrealX@gamethattune.club',
               image: '',
               timestamp: '2022-04-05T12:23:32Z',
               disabledAt: null,

web/components/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -10,6 +10,9 @@
   margin: 0.5em;
   font-size: 1rem;
   line-height: 1.5rem;
+  height: 100%;
+  align-items: center;
+  transition: border-color 0.2s ease-in-out;
 
   &:hover {
     border-color: var(--theme-text-link);