[Float] Chat Disappears Behind Channels

[sabxtrax]

I don't even know how to describe this issue lmao but I disabled any extensions that might've broken and it still gave me this issue.

Recording.2024-12-14.105633.mp4

[txkyel]

I found the following rule which seems to interfere with the theme. Disabling it with devtools seems to fix the problem.

html:not(.visual-refresh) .sidebar_a4d4d9:not(.hidden_a4d4d9) {
    width: 240px !important;
}

I'm assuming that adding !important to this rule might solve the issue. nvm it looks like the offending rule has priority

[VANANA-R0TAT3]

I found the following rule which seems to interfere with the theme. Disabling it with devtools seems to fix the problem.

html:not(.visual-refresh) .sidebar_a4d4d9:not(.hidden_a4d4d9) {
    width: 240px !important;
}

I'm assuming that adding !important to this rule might solve the issue. nvm it looks like the offending rule has priority

heres the fix for anyone struggling to figure out how to disable this,
press ctrl+shift+i and it should open the console up
click the little arrows until you get to the "<div data-collapsed="false" class="sidebar_a4d4d9">" bar, type in "html" in the filters bar to find the code thats in the above reply, then just unclick the checkmark at "width"

2024-12-17.20-15-30.mp4

[MaddoxCH]

Hello guys, you can simply add these lines in your custom css settings in betterdiscord:

html:not(.visual-refresh) div .sidebar_a4d4d9:not(.hidden_a4d4d9) {
    width: unset !important;
}

Works like a charm for me :)

[VANANA-R0TAT3]

Hello guys, you can simply add these lines in your custom css settings in betterdiscord:

html:not(.visual-refresh) div .sidebar_a4d4d9:not(.hidden_a4d4d9) {
    width: unset !important;
}

Works like a charm for me :)

omg this is so much easier, tysm 😭

[akkini1]

Hello peeps, really happy that this solution exists, but it isn't flawless, somehow it doesn't play nicely on vencord with the spotify controls plugin (i discovered that this also happens with channel names of excessive length), seems to just make the sidebar the width of the longest text in it.

not especially tech savvy in this department myself, so i cant provide a fix for it, but i wanted to highlight it
thanku all :3

[F4Xa]

Hi, just wanted to point out that if you use the solution provided by MaddoxCH the channels with a lot of characters will display like presented in the image.

[MaddoxCH]

Hi again guys, to resolve the width problem, you can simply add a max-width to your css, by default it's 240px.

html:not(.visual-refresh) div .sidebar_a4d4d9:not(.hidden_a4d4d9) {
    width: fit-content !important;
    max-width: 240px !important
}

[FakeMichau]

i did this instead as i still had issue with short channel names causing the bar to shrink

@media (max-width:940px) {
    html:not(.visual-refresh) div .sidebar_a4d4d9:not(.hidden_a4d4d9) {
        width: fit-content !important;
    }
}