Shrinking/growing Friends list

[viscid wasp]

widescreen display momento

[charred oar]

realeth

[mild kraken]

peak

[main solar]

somehow i fucked it up moment

[carmine stag]

same here

checked to see if it was a colliding snippet and can confirm it isnt

[topaz prawn]

Uhh...

[charred oar]

How the fuck does one of my snippets break in a single fucking day

[topaz prawn]

Blame electron

[fluid grail]

As a narrow window enjoyer this is nice.

[balmy shore]

:root {
    --friend-row-amount: 3;
}

@media (width < 1200px) {
    #app-mount {
        --friend-row-amount: 2;
    }
}
@media (width < 1000px) {
    #app-mount {
        --friend-row-amount: 1;
    }
}

.peopleList__5ec2f > div {
    display: grid;
    grid-template-columns: repeat(
        var(--friend-row-amount), 
        calc(100% / var(--friend-row-amount))
    );
    gap: var(--space-8);
    padding-inline: var(--space-16);

    .sectionTitle__5ec2f {
        grid-column: 1 / -1;
        > h2.title__1472a {
            margin-left: 0px;
        }
    }

    .peopleListItem_cc6179 {
        margin: 0px !important;
        border: none;
        padding-inline: var(--space-8);

        .discriminator__0a06e {
            display: none;
        }

        &:hover .discriminator__0a06e {
            display: block;
        }
    }
}

This is the one I made with grid (and some visual changes).

[balmy shore]

It doesn't show like that for me...

Is this with the original snippet, though?

[static flame]

appears like that for me too

[static flame]

and i took it right from this code

[balmy shore]

For me, it's just fine.

Did you try the original snippet?

[tiny otter]

yes

[pallid plank]

it may depend on the screen resolution

right ?

like if you're on 1080p or 1440p or 4k or something

[balmy shore]

Is the mobile view in Dev Tools accurate?

And if yes, then (for me) it's working.

[static flame]

tried both the original and the oe you made

neither work

does your thing work outside of dev tools?

[balmy shore]

Yeah, it does.

[fluid grail]

:root {
    --friend-row-amount: 4;
}
@media (width < 1300px) {
    #app-mount {
        --friend-row-amount: 3;
    }
}
@media (width < 1100px) {
    #app-mount {
        --friend-row-amount: 2;
    }
}
@media (width < 700px) {
    #app-mount {
        --friend-row-amount: 1;
    }
}

[class*=peopleList__] > div {
display: flex;
flex-wrap: wrap;
margin: 0px 0px 0px 16px;

[class*=sectionTitle__] {
    width: 100%;
    >h2.title__1472a {
margin-left: 0px;
    }
}
[class*=peopleListItem_] {
    margin: 0px!important;
    width: calc(100% / var(--friend-row-amount));
    overflow: visible;
}
[class*=infoSpacing_] {
    display: none;
}
}

Not ideal to use wildcard selectors for performance reasons, but it's possible you have different class names so this would work in that case.

[young crescent]

buggy

[white plank]

discord just broke this snippet

[white plank]

i was able to fix it with the class updater

[craggy skiff]

is there a way to remove the animation when clicking 'online' and 'all'

[white plank]

this snippet kinda just got broken

[rotund blade]

If something is wrong with it let me know

display: flex;
flex-wrap: wrap;
margin: 0px 0px 0px 5px;

.sectionTitle__5ec2f {
    width: 100%;
    >h2.title__1472a {
margin-left: 0px;
    }
}

.peopleListItem_cc6179 {
    margin: 0px;
    width: calc(100% / var(--friend-row-amount));
    overflow: visible;
}

.infoSpacing_f4bc97 {
    display: none;
}

.divider_cc6179 {
  display: none;
}
}```