**Compress bot messages**

[void acorn]

If for whatever reason you wanted this to be Vencord-specific, here's my original CSS that used link endings instead of child number to determine what should/shouldn't be modified:

/* Compress Vencord GitHub bot Star and Fork messages */
[class^="grid_"]:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]) {
  display: flex;
  padding: 0.1rem 1rem 0.6rem 0.75rem;
}

/* add padding between username and link */
[class^="grid_"]:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]) [class^="embedTitle_"] {
  padding-left: 12px;
}

/* Hide the extra GitHub bot avatars */
[class^="messageListItem_"]:has([class^="botText_"]):has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]) [class^="contents_"] {
  display:none;
}

/* Reduce padding between selected bot messages */
[class^="messageListItem_"]:has([class^="botText_"]):has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]) [class*="groupStart_"] {
  margin-top: -12px;
}
.container__62863:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]) {
  padding-top: 0rem;
  padding-bottom: 0rem;
  top: 12px;
}

/* I do some weird offseting, it just looks better to not have a misaligned hover overlay */
.message_ccca67:has(a[href$="Vencord"],a[href$="Vesktop"],a[href$="vencord.dev"],a[href$="Vendroid"],a[href$="Installer"]):hover {
  background-color: #00000000 !important;
}

/* Align small bot messages with large ones */
/* Alternately, you could remove their background color or live with mismatched lengths */
[class^="gridContainer_"] {
  min-width: 525px;
}

[hexed kindle]

this is cool but it looks too fucked when you hover those messages it

[void acorn]

does it? I removed the hover overlay since it was misaligned

[void acorn]

That is either one of your other themes interfering, or the selector .message_ccca67 failing

[void acorn]

actually, try

[class^="message_"]:has([class^="grid_"] > :last-child:nth-child(2)):hover {
  background-color: #00000000 !important;
}

[hexed kindle]

nope still the same

also none of my things interfer

[void acorn]

hmm

it's really not a conflict? if you disable all of your themes and QuickCSS and just use my original snippet, you still have that hover overlay?

[hexed kindle]

i fully cleared out css and only put your snippet in and it was broken

the theme i have is a nitro theme i can disable that but i think itd be odd if that fucks with it

ofc its the nitro theme

[void acorn]

wow lol

[hexed kindle]

how does that even work

wtf discord

[void acorn]

what Nitro theme are you using? I can look into fixing it

[hexed kindle]

the sepia one

[void acorn]

.message_ccca67:has([class^="grid_"] > :last-child:nth-child(2)):hover {
  background-color: #00000000 !important;
  background: #00000000 !important;
}

for some reason that theme changes background instead of background-color like the regular Discord theme does lol

[hexed kindle]

yop that works thanks a lot :3

[quick tiger]

Soo, is there a fixed version or is the original post still good?

[void acorn]

I've updated the original post with the fix

it was only needed if you used a Nitro theme

The QuickCSS editor will spit out a bunch of errors but the CSS is valid - I'm using newer standards than the parser can handle lol

[sleek knoll]

This doesn't look... right. It looks like the user posted GitHub embeds.
Since user can't post embed directly, this wouldn't be hard to distinguish, though.

[vapid fiber]

it also breaks .fmbot featured embeds in case anyone is in that server tho i assume this would fix it

is cool tho :3

[void acorn]

Yeah, I can see how minimized bot messages could look like user-posted embeds. I just wanted the messages to be small, more than anything. You can use this:

[class^="grid_"]:has(> :last-child:nth-child(2)) {
  display: flex;
  flex-wrap: wrap;
  padding: 0.1rem 1rem 0.6rem 0.75rem;
}
[class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedTitle_"],
[class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedDescription_"] {
  padding-left: 12px;
}

instead of my posted snippet to reduce the size of the messages while still looking like normal bot embeds

[void acorn]

I don't know .fmbot - can you share a screenshot showing what's broken or dm me an invite to a server that has it

[vapid fiber]

it basically just overlaps the reactions that r on each embed

[void acorn]

ooh, I see. I wasn't thinking of emote reactions when I wrote this snippet

[void acorn]

try this:

/**** Compress GitHub Bot's star and fork messages ****/
[class^="grid_"]:has(> :last-child:nth-child(2)) {
  display: flex;
  flex-wrap: wrap;
  padding: 0.1rem 1rem 0.6rem 0.75rem;
}

/* add padding between username and link */
[class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedTitle_"],
[class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedDescription_"] {
  padding-left: 12px;
}

/* Hide the extra GitHub bot avatars */
[class^="messageListItem_"]:has([class^="botText_"]):has([class^="grid_"] > :last-child:nth-child(2)) [class^="contents_"] {
  display:none;
}
/* Reduce padding between selected bot messages */
[class^="messageListItem_"]:has([class^="botText_"]):has([class^="grid_"] > :last-child:nth-child(2)) [class*="groupStart_"] {
  margin-top: 0px;
}
.container__62863:has([class^="grid_"] > :last-child:nth-child(2)) {
  padding-top: 0rem;
  padding-bottom: 0rem;
  top: 0px;
}

It's my original snippet with the padding and squeezed offset logic removed.
You can also re-add

[class^="gridContainer_"], [class^="embedWrapper_"] {
  min-width: 525px;
}

If you want, it's not really needed anymore since the minimized messages no longer touch

[bright viper]

why only github ?