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);