Aligned chat box and "typing" indicator

[cedar viper]

Hey, this works great when "UI Density" (In "Appearance" settings) is set to "Default", but doesn't work when set to "Compact".

Is there any way this could be fixed for "Compact" as well?

[quick folio]

Compact Mode

.container_c48ade {
  --custom-chat-input-margin-bottom: 16px;
}
:root {
  --custom-channel-textarea-text-area-height: 42px;
}
.visual-refresh .base_b88801 .cooldownText_b21699 {
  font-size: 12px;
  height: 26px;
  display: flex;
  align-items: flex-end;
}
.typing_b88801 {
  font-size: 12px;
  height: 26px;
  display: flex;
  align-items: flex-end;
}```

Try it

[cedar viper]

It works, thanks!

[jade cove]

is there any way to make the names under the chat bar smaller? theyre way too big smh

[quick folio]

remove .visual-refresh .base_b88801 { font-size: 13.5px; height: 18px; }

or down the font-size

12 was the default value I think

[jade cove]

thank u sm

[jade fulcrum]

I knew I wasn't the only one triggered by this 🤣

[quick folio]

@fleet osprey why 👎?

[fleet osprey]

cuz it aint working for me, i have to insert different px values. I use default theme with ash colouring. Maybe its also dependent on screen display

[quick folio]

Sounds like a you issue

[fleet osprey]

Achievable with ```css
.visual-refresh {
--custom-channel-textarea-text-area-height: 60px;
.form_f75fb0 {
display: flex;
flex-direction: column;
}
.channelTextArea_f75fb0 {
margin-bottom: 10px;
}
.base_b88801 {
position: static;
order: -1;
}
}

your solution

[quick folio]

Still it's a "only you issue", it shouldn't look like that with the default sizing

[fleet osprey]

only me issue 😥 i undid my thumbsdown

[onyx orchid]

  padding-top: 1px;
}```
If you add this value to your code, then "reply bar" will be smaller and more fitting with chat bar

[outer flame]

how to enabe it?

[mild flint]

guys how do I remove rounded edges for the chat bar in this

    --custom-channel-textarea-text-area-height: 56px;
    .form_f75fb0 {
        margin: 2 2px 2px 2px;
        padding: 0;
        --chatbar-border-color: var(--border-faint);
    }
    .channelTextArea_f75fb0 {
        margin: 0;
        border-color: var(--chatbar-border-color);
        transition: none;
    }
    .base_b88801 {
        top: -24px;
        left: 0;
        right: 0;
        background-color: var(--chat-background-default);
        padding: 0 8px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border: 1px solid var(--chatbar-border-color);
        border-bottom: none;
        transition: none;
        box-sizing: border-box;
    }
    .stackedBars__74017,
    .threadSuggestionBar__841c8 {
        border-color: var(--chatbar-border-color) !important;
    }
    .form_f75fb0:has(.base_b88801) {
        .channelTextArea_f75fb0 {
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
    }
    .form_f75fb0:has(.channelTextArea__74017:focus-within) {
        --chatbar-border-color: var(--border-subtle);
    }
    .scrollerSpacer__36d07 {
        height: calc(10px + 8px);
    }
    .scroller__36d07::-webkit-scrollbar-track {
        margin-bottom: calc(20px + 8px);
    }
    .bottomBar__0f481 {
        margin-bottom: 24px;
    }
    .wrapper__44df5 {
        margin: 0;
        border-radius: var(--radius-sm);
    }
}

/* Aligned Chat Box and Typing indicator */
.container_c48ade {
  --custom-chat-input-margin-bottom: 22px;
}
:root {
  --custom-channel-textarea-text-area-height: 52px;
}
.visual-refresh .base_b88801 {
  font-size: 13.5px;
  height: 22px;
  display: flex !important;
  align-items: center !important;
}```

or is it rounded because discord default new ui is also rounded by default

[fathom cosmos]

yes

[oak relic]

yayy i had the same problem, thanks

[glossy spire]

it seems to no longer be aligned

😿

[median glade]

/* Aligned Chat Box and Typing indicator */
.container_c48ade {
    --custom-chat-input-margin-bottom: 22px !important;
}

:root {
    --custom-channel-textarea-text-area-height: 42px;
}

/* Typing ... */
.base_b88801 {
    font-size: 13.5px;
    display: flex !important;
    align-items: center !important;
    bottom: -1.5px !important;
    top: unset !important;
    padding-left: 4px !important;
}

/* Upload button in the text area */
.attachWrapper__0923f {
    height: 42px;
    padding: 0px 0px 0px 10px !important;
    display: flex;
}

/* Remove double background hover effect */
.attachButton__0923f.attachButton__74017.button__24af7:hover {
    background-color: unset !important
}

/* Fixes the Annoying Space between chat and text area */
.scrollerSpacer__36d07 {
    height: 28px !important;
    /* lower this size if u want less space */
}

made this

Known issue:

• When someone is typing and you are replying to a msg it's not working anymore... (Fixed on 26/08)

kinda fixes it

i don't know how future proof it is tho

@severe frost u told me to @ you if i got smth

[severe frost]

oh wow thanks a lot

[median glade]

np

[severe frost]

thanks

[lime rose]

dev://experiment/2025-05_align_chat_input

[glossy spire]

thank you so much

god thats so much betterr

[lyric tapir]

By just deleting the "base_b88801" part, I got this cool effect. I wanted to ask how to prevent the typing indicator from moving the entire chat up and down, but I actually already prefer this.

[median glade]

i've fixed the case when someone is typing it fucked up the typing thingy

[final coral]

I have the new code in my quickCSS but it still has a problem and idk where it comes from

I tried changing some values but I cant seem to put the chat box higher

not with the code I have at least

[plain steeple]

Yup, things have changed quite a bit with the latest update, which broke this snippet. But it's not classes being outdated

[plain steeple]

.chatTypingGradientNotAtBottom__36d07 {
  display: none !important;
}
.scrollerSpacer__36d07 {
  height: 30px !important;
}
.typing_b88801 {
  margin-top: 80px;
}
.channelBottomBarArea_f75fb0  {
  margin-bottom: 15px;
}

This reverts the new look to the "old new" look from when Visual refresh dropped

[slow ruin]

with the new update I swapped to this code and its working great for my needs. Except for one thing, the fade effect when someone is typing is still present on top of the chat bar. It then disappears when no one is typing.

Anyone know code to remove the fade completely?

[plain steeple]

That would be the first class in what I sent above

[slow ruin]

Oh thank you so much, I completely missed that 💞

[slow ruin]

That fade effect seems to have come back, any idea on what to change in the CSS to get rid of it again?

Never mind, restarting discord seemed to remove it again
Apologies for the ping

[bronze viper]

Any chance of this being fixed? The chat box being this large is so stupid.

[quick folio]

Probably not, now discord is like this by default so there's really no need for this snippet anymore

[bronze viper]

I more so meant the chat box width part

[hidden harbor]

This is how it looks right now with slowmode enabled.

Nvm I think I got mine fixed.

[buoyant wharf]

It seems the recent Discord update unfortunately broke this snippet

[lime rose]

discord made it align with it by default

[buoyant wharf]

I see

[slow ruin]

For anyone who likes the skinner chat box that this code used to give, but wants it risen a little. You can use this code along side it. Adjust 13px to your liking.

.channelBottomBarArea_f75fb0  {
  margin-bottom: 13px;
}

I moved the "X is typing..." message below the chat bar so I needed it risen a bit to fit that message in.
Just know that the chat bar will not be aligned at the bottom anymore for obvious reasons.

Full code im using is this, some parts might have been made redundant, I'm not sure.

/* Aligned Chat Box and Typing indicator */
.container_c48ade {
    --custom-chat-input-margin-bottom: 22px !important;
}

:root {
    --custom-channel-textarea-text-area-height: 42px;
}

.channelBottomBarArea_f75fb0  {
  margin-bottom: 13px;
}

[slow ruin]

Anyone have an updated version of this?
Or atleast the updated classes to what I posted above

The tool wasnt able to fix this one

Never mind, it was still working but just had to adjust padding for some reason

[light sparrow]

this seems to not be working for me anymore, chat bar is back to being excessively large

[buoyant wharf]

it does

[buoyant wharf]

Try this website

If that doesn't work I can send you mine, that works

[buoyant wharf]

Forgot to send the link, my bad

https://syndishanx.github.io/Website/Update_Classes.html.

[light sparrow]

this worked, tysm!! will def save that site for later, very nice tool

[quick folio]

Reminder that Discord by default has an aligned chatbox, so this snippet is no longer needed.

[faint patio]

^ the css a bit above is for misaligning it so the "x is typing" message is back below the chat box

[median glade]

Thanks, this saved me some time ^^

[atomic juniper]

Has anyone found a fix/alternative for this one yet?

[lime rose]

the chat box is aligned by default

but this should be able to fix it #🎨-theme-development message

[atomic juniper]

Thanks, looks correct again (mainly use this for the typing indicator below the input)

[slow ruin]

Could you send me your working code? I'm a bit confused on how to apply that fix

[wind torrent]

same

[lime rose]

if you have vscode, open it, otherwise you can do it on the online version (vscode.dev)
then make a new file
press ctrl+f to open find
press the .* symbol or alt+r
paste \.([_0-9a-f]{6})[0-9a-f]{10,11}-([A-Za-z0-9_\-]+) in
press toggle replace on the left (ctrl+h)
paste .$2_$1 in
press replace all (ctrl+alt+enter)

@slow ruin @wind torrent

[wind torrent]

its funny, i just figured it out a few minutes ago 💀 appreciate it tho lol

[slow ruin]

Hmm, im still confused because my code doesnt have .$2_$1 to replace in the first place
I'm trying to get this working

/* Aligned Chat Box and Typing indicator */
._5e434347c823b592-container {
    --custom-chat-input-margin-bottom: 22px !important;
}

:root {
    --custom-channel-textarea-text-area-height: 42px;
}

.f75fb00fb7356cbe-channelBottomBarArea  {
  margin-bottom: 0px;
}

/* Typing ... */
.b8880176888cc928-base {
    font-size: 13.5px;
    display: flex !important;
    align-items: center !important;
    bottom: -1.5px !important;
    top: unset !important;
    padding-left: 4px !important;
}

is this what others are using still?

[lime rose]

.$2_$1 is the replacement

they're capture groups

[slow ruin]

oh im silly, i saw it say no results after i pressed replace all and thought nothing happened

this code isnt doing what it used to do for me though, I used it to make the chat box skinner, this is just moving it upwards now

#1354227244834492486 message

[lime rose]

add max- like this

[slow ruin]

Sadly now making it so the chatbox doesn't extend upwards
when
typing
things like
this

bleh, im so sick of discord haha
thank you for your help though. its chill if you cant be bothered troubleshooting it

[lime rose]

idk

[slow ruin]

You're a legend anyway, thank you again!

[atomic juniper]

.container__5e434 {
    --custom-chat-input-margin-bottom: 22px !important;
}
:root {
    --custom-channel-textarea-text-area-height: 42px;
}
.channelBottomBarArea_f75fb0  {
  margin-bottom: 13px;
}

/* Typing ... */
.base_b88801 {
    font-size: 13.5px;
    display: flex !important;
    align-items: center !important;
    bottom: -1.5px !important;
    top: unset !important;
    padding-left: 4px !important;
}
.chatTypingGradientNotAtBottom__36d07 {
  display: none !important;
}
.scrollerSpacer__36d07 {
  height: 30px !important;
}
.typing_b88801 {
  margin-top: 80px;
}
.channelBottomBarArea_f75fb0  {
  margin-bottom: 3px;
}
/* Upload button in the text area */
.attachWrapper__0923f {
    height: 42px;
    padding: 0px 0px 0px 10px !important;
    display: flex;
}

/* Fixes the Annoying Space between chat and text area */
.scrollerSpacer__36d07 {
    height: 28px !important;
    /* lower this size if u want less space */
}
.chatTypingGradientNotAtBottom__36d07 {
  display: none !important;
}```

This is everything I use for the chatbox stuff and it works for me (I dont know if it includes some other stuff thats not from this snippet, but I kinda lost track)

[slow ruin]

Thanks a lot, so with my previous attempts I was trying my updated code isolated by itself by deleting everything else and it wasn't working
With this, it was working by itself but not with everything else. I was able to identify the issue and sorted it out. Seems to be good now!

I really need to clean out my quick CSS someday though 😵‍💫

[faint patio]

fixes everything but the gradient

[atomic juniper]

You mean the gradient above the chatbox?

[faint patio]

ye

[atomic juniper]

  display: none !important;
}```

This part specifically gets rid of it for me and that was included in the one I shared earlier

Do you have any conflicting snippets?

[faint patio]

it shows up for a split second before going away

when scrolling up

otherwise it is indeed gone

[unkempt kite]

is there a way to shrink the distance between icons in the chat bar easily?

feels like something people using this might like hence why I ask here

[lime rose]

.textArea__74017+.buttons__74017 {
  gap: 0px;
}

by default, i think it's 8px

[unkempt kite]

that's perfect