Enabling chat changes the padding of main-outlet on mobile

Enabling chat changes the padding on my main-outlet on mobile like so:




The relevant chat CSS is here:

(padding is overwritten from 1em to 0)

I understand that it’s still under development and things might change. I guess it makes sense to set the padding to zero on the chat page but it ends up getting applied to every page.

A second thing I noticed is that on mobile, my keyboard covers what I’m typing (android/chrome):

compare that to discord, where the textbox is placed above the keyboard

This feels more like a bug than something just overlooked. I can do more digging into this issue to see if it’s another theme component or something causing it if it’s a bug specific on my end

Do you have android version / chrome version please?

Are you sure this is coming from chat ? we don’t have a chat-mobile.scss file AFAIK.

Let me clarify whether I have chat installed the proper way first then,
I rebuilt my instance last night. I didn’t include the chat in my app.yml file - my understanding is that it’s now a plugin that comes with discourse core?

The URL links to here: discourse/plugins/chat at main · discourse/discourse · GitHub

I will find where this chat-mobile.scss is coming from.

Yes this is now a core plugin

It’s possible I’m missing something here… but from the top of my head, I don’t know where this would be in the plugin currently. We have something with padding but this is supposed to be scoped to .has-full-page-chat and as a result shouldn’t impact other pages.

1 Like

I found it, it seems to be from the Discourse Air theme I’m using

I use that with some of my own CSS overriding so I think this is a “me” problem in this case.

I will look into the keyboard issue, I am assuming this behaviour is not intentional right?

1 Like

Yep not intentional :slight_smile:

I’ve isolated the issue. I have a couple components that use the below-site-header outlet (ie. a rotating banner and a navbar). I’m guessing their height is not properly being accounted for?

full screenshot

These are custom components I’ve written so maybe it’s another “me” problem but it could also be that anything in below-site-header could be a problem in which case it becomes a “we” problem :slight_smile:

1 Like

How would that work though? You would be left with 50px height to show chat.

I think the primary issue is that when you touch the chat text box, the screen jumps to the very top of the page and the stuff in below-site-header becomes visible.

video example

I think it would make more sense if the page instead jumped to a position where the bottom of the chat div was right above the keyboard. Or have the textbox div sticky to the bottom of the page (and top of the keyboard) so that it is always visible and overlays everything.

Regardless of the ideal solution, the textbox should be the very first priority of what is visible on screen even if it’s only 50px available.