From f1ca5f95490fc1fb90e974bfa6d6d4093a36ee1a Mon Sep 17 00:00:00 2001
From: Germaine Lee <118464031+germainelee@users.noreply.github.com>
Date: Wed, 12 Feb 2025 23:46:54 -0500
Subject: [PATCH] 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
---
 .../FollowerCollection.module.scss            | 29 ++++++++++++++-----
 .../FollowerCollection.stories.tsx            |  6 ++--
 .../SingleFollower/SingleFollower.module.scss |  3 ++
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
index ad52ee70cc..bb3022cf65 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
+++ b/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));
-  }
-
-  @media (width <= 900px) {
-    .followerRow {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+    gap: 16px 0;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-auto-rows: min-content;
   }
 
   @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 {
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
index 59386906db..c666490d8a 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
@@ -101,9 +101,9 @@ const mocks = {
               disabledAt: null,
             },
             {
-              link: 'https://gamethattune.club/users/thelinkfloyd',
-              name: 'thelinkfloyd',
-              username: 'thelinkfloyd@gamethattune.club',
+              link: 'https://gamethattune.club/users/fourthwall',
+              name: ':fourthwall: █████ :fourthwall: (( MagmaSys ))',
+              username: 'EnlightenmentSurrealX@gamethattune.club',
               image: '',
               timestamp: '2022-04-05T12:23:32Z',
               disabledAt: null,
diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
index 997f3c420a..f7f039b5c3 100644
--- a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
+++ b/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);