Multiple things I've noticed while using Slate

[Sateraphim]

Describe the bugs

1. About Me title and body text are misaligned and lean too much to the border of the user popout.
2. The "x" symbol is displaced when you hover your cursor over editable roles in a server. It appears in the middle of the role instead of the side, so it overlaps with the role name.
3. The Add to Server button in a bot's user popout overflows past the popout itself, though it doesn't appear in the background. This is only a minor thing and it doesn't really cause any problems. I just wanted to point it out in case the button wasn't intended to look like that.
4. Displaced status symbol when viewing your user profile and status. Along with this, the shape of the View Profile button is still the same default circle even when you have the Slate theme on.
5. Do Not Disturb status info text doesn't have enough space, causing it to overlap with the text below it. The status names also look a bit uncentered with what seem to be incomplete borders.
6. Same case as Messages are cut off in the pin/search/inbox popout #66, but for me, it only affects the inbox popout.

To Reproduce

1.)

• Click on someone’s profile through one of their messages or through a server’s member list to view their About Me.

2.)

• Have a server that allows you to create and edit roles.
• Make a new role and assign it to any member.
• View the server profile of the member assigned with the new role.
• Hover your cursor over the new role.

3.)

• View the profile of any bot from any server.

4.)

• Click on your avatar beside the file attachment button.
• In the popup, hover your cursor over your profile picture to see the View Profile button.

5.)

• Repeat the first step from 4.)
• Hover your cursor over the text that displays your current status.

6.)

• Open your inbox. 👍

Screenshots

1.)

2.) - 3.)

4.)

5.)

6.)

Information

Discord channel: Stable
OS: Windows 10
Mod: BetterDiscord
Discord language: English US

Additional context

I am not certain if any of the aforementioned issues above are present in any other devices beyond mine.

[0xEquinox]

I've just submitted a pr to fix the about me section, will try my best to fix the others as well

[0xEquinox]

I fixed all the issues except number 4 which was giving me a lot of trouble. I submitted a punch of PRs to fix all of those, no idea if they will get accepted, or if the maintainers are actually active. You can just paste this into the local CSS file for the plugin and it should fix most of the issues. Feel free to tweak it a little; I know it isn't perfect.

edit: There are some drawbacks to some of my approaches: Your messages will be further apart, especially when replying to someone else's message, I think it's something like 5 pixels or so, not too bad but still noticeable. I changed the look of the roles altogether, you might not like that, but you can always get rid of it.

.userInfoSection-3her-v {
    margin-left: 10px;
}

.description-1Dd2kv {
    font-size: 0px;
}

.statusItem-38ArJn {
    padding: 1px 8px;
}

#app-mount .wrapper-30-Nkg.cozy-VmLDNB:not(.groupStart-3Mlgv1) {
    margin-top: -5px;
}

#app-mount .repliedMessage-3Z6XBG + .contents-2MsGLg .header-2jRmjb {
    margin-bottom: 34px;
}

#app-mount .repliedMessage-3Z6XBG {
    padding: 1px;
    padding-left: 3.5px;
    padding-right: 4px;
}

.roleRemoveIcon-387wKV {
    width: 10px;
    height: 100%;
    top: 5px;
    left: -5px;
    margin: -5px 0 0 -5px;
    background-color: var(--background-dark);
    border: 1px solid var(--background-dark);
    border-left: 11px solid var(--background-dark);
}

#app-mount .userPopout-2j1gM4 .member-perm, #app-mount .userPopout-2j1gM4 .role-2TIOKu {
    border-radius: 50px;
    padding-left: 17px;
}

#app-mount .userPopout-2j1gM4 .member-perm .perm-circle, #app-mount .userPopout-2j1gM4 .member-perm .roleCircle-3K9O3d, #app-mount .userPopout-2j1gM4 .role-2TIOKu .perm-circle, #app-mount .userPopout-2j1gM4 .role-2TIOKu .roleCircle-3K9O3d {
    left: 10px;
}

#app-mount .userPopout-2j1gM4 .actionButton-1YKTU0 {
    position: absolute!important;
    top: -34px;
    padding-left: 0px!important;
}

#app-mount .lookFilled-yCfaCM:not(.colorGrey-2DXtkV), #app-mount .bd-modal-wrapper .footer button, #app-mount .primaryButton-361sHl {
    width: 93.5%;
}

#app-mount .panels-3wFtMD button {
    padding-top: 3px;
}

[Sateraphim]

Thank you! Most of it looks good now but I'll leave this issue open in case the maintainers will find a way to fix number 4.