Composer handle can be dragged up behind the site header on touchscreen devices

Contribute Bug

AI-generated summary

A discussion on a bug where the Composer handle in Discourse can be dragged up behind the site header on touchscreen devices, particularly when using Google Chrome. Kemplen reported the issue, providing screenshots to illustrate the problem. Canapin confirmed the issue and noted it occurs on both touchscreen and non-touchscreen devices when using Chrome’s dev tools with an iPad profile. JammyDodger suggested checking safe mode to rule out theme interference. Don provided a CSS fix that resolves the issue on iPad and shared a video demonstrating the fix. Kemplen confirmed the issue was resolved by clearing Chrome’s cache, though Don noted this might only reset the composer’s default height. The issue was acknowledged as a bug, and jordan.vidrine confirmed the fix would be deployed with the latest PR.

1

Hi All,
As from today the editing section is extended up to the top of the page and there is no way to reduce it because the blue separator is no longer available.
Any help will be appreciated.

1 Like
2

Hi @Kemplen!

Do you mean that the draggable part of the post composer is hidden behind the header?

Can you share a screenshot?

1 Like
3

Yes, here is how my screen appears:

image
image1282Ă—734 34.7 KB

Whereas usually it appeared like this one of Discourse:

image
image1311Ă—1209 63.3 KB

Thanks for your support.

1 Like
4

I’ve just tried to replicate it here on Meta and I can’t seem to get it stuck behind the header. Have you tried your site in safe mode to see if it’s a theme component that may be causing the issue?

2 Likes
5

Hello,

If I see it correctly you using a touchscreen device. I tried to repro it on an iPad and I can.

Here is a quick fix which works for me on iPad. :slightly_smiling_face:

body:not(.ios-safari-composer-hacks) {
  #reply-control.open {
    max-height: calc(100vh - var(--header-offset) - env(safe-area-inset-bottom));
  }
}

3 Likes
6

Thanks for your help.

It was an issue caused by Google Chrome, in fact using Mozilla Firefox there wasn’t the problem. Simply cleaning Google Chrome’s cache memory solved it.

Thanks again.

3 Likes
7

That’s great :slightly_smiling_face: but I think remove cache just resets the composer default height.

2 Likes
8

Oh, that’s very interesting. On non-touchscreen devices, the height of the composer (handle included) will never be higher than the forum’s header, regardless of --composer-height value.

I can repro the issue as well using Chrome’s dev tools and choosing an iPad profile. Or my real iPad :smile_cat:

Moving into Contribute > Bug then, it’s worth a fix. :slight_smile:

2 Likes
13

The composer grip handle being hidden behind the header should now be fixed upon deploy of the latest PR. → UX: Fix mobile grippie being hidden by jordanvidrine · Pull Request #20803 · discourse/discourse · GitHub

4 Likes