The panel, the keyboard, and what is actually adjustable

On a phone the panel takes the whole screen, and once the keyboard opens the field you are typing into is behind it, or the send control is below the visible edge.

In rough order of how often each one turns out to be the answer. Work down rather than across: each carries a way to tell whether it is yours before you change anything.

• 1

  The keyboard shrinks the visible viewport without always shrinking the laid out one

  Why

  The panel is a fixed element sized against the viewport. When a keyboard opens, some browsers shrink the viewport the page is laid out against and some shrink only the part of it you can see. In the second case a full height panel still extends behind the keyboard, and the composer, which sits at the bottom of that panel, goes with it.

  How to confirm it is this one

  Attach the phone to a desktop browser for remote inspection, open the keyboard, and compare window.innerHeight against window.visualViewport.height. If the two differ, the laid out viewport did not shrink, and everything anchored to the bottom of the panel is now below the visible area.

  Fix

  No appearance setting changes this, because the browser and the operating system decide it. What you can do is test on the browsers your visitors actually use rather than on a narrowed desktop window, which has no keyboard and will therefore never show you this at all.

• 2

  The panel is in fullscreen mode because the screen is 520 pixels wide or less

  Why

  Mobile fullscreen is on by default. At 520 pixels and below the panel takes the whole viewport, loses its corner radius, and the launcher is hidden for as long as the panel is open. Above that width it is a floating box at the width and height you set. Everything about how the panel meets a keyboard is different on either side of that line.

  How to confirm it is this one

  Open the panel in a desktop browser and drag the window across 520 pixels wide. The switch is immediate and unmistakable: the panel snaps to the whole window and the launcher disappears.

  Fix

  If you want the floating box on phones, turn mobile fullscreen off, which is set through the API rather than on the appearance screen. Then bring the panel width down as well, because the default is wider than many phone screens and the panel does not shrink itself to fit. The width is on the appearance screen and goes down to 300.

• 3

  On iOS a fixed element is not placed against the part of the screen you can see

  Why

  iOS places fixed elements against the laid out viewport, which the keyboard does not shrink, and Safari then scrolls the visible area to bring the focused field into view. The panel is fixed, so it can end up shifted relative to the screen while its layout has not changed at all. That is why the same build behaves differently on an iPhone and on an Android phone with nothing different happening between them.

  How to confirm it is this one

  With the keyboard open, read window.visualViewport.offsetTop in a remote inspector. A value other than zero means the visible area has been scrolled within the laid out viewport, and that is the state that moves a fixed panel around underneath it.

  Fix

  Nothing to configure and nothing worth working around. Dismissing the keyboard returns the panel to its place, which a visitor does without thinking about it. If you are reproducing this deliberately, use a real device, because a simulator does not always model the same viewport behaviour.

• 4

  The panel height you configured is not the height you get

  Why

  Above the fullscreen width the panel caps its own height against the viewport, allowing for the offsets and the launcher, and where the host page is asked to resize the frame it never allows more than the viewport height less 100 pixels. A tall panel on a phone held in landscape is therefore much shorter than the number in the settings.

  How to confirm it is this one

  Open the panel in landscape on a phone and measure the frame in a remote inspector against the height in the appearance settings. A measured height smaller than the configured one is the cap doing its job rather than a fault.

  Fix

  None needed. The cap exists so the panel cannot extend past the screen it is on. If you want more room on a phone, mobile fullscreen already gives you the entire screen, which is the largest the panel can ever be.

• 5

  The launcher is hidden while the panel is open, so there seems to be no way out

  Why

  In fullscreen mode the launcher is hidden for as long as the panel is open, because a launcher floating on top of a full screen conversation is an obstacle rather than a control. The way back is the close control in the panel header, and on a keyboard the Escape key.

  How to confirm it is this one

  Open the panel on a phone. The corner is empty and the header carries a close control at its top right. Tapping it returns you to the page with the launcher back where it was.

  Fix

  Nothing to fix. If visitors report that they cannot close it, check your custom CSS: it is delivered with the panel and applies inside it, so a rule that hides or covers the header removes the only exit on a narrow screen.

If the panel does not appear at all on a phone while it is fine on a desktop, this is not the page for it. The launcher and the panel load at two different moments, and a frame policy blocks the second one on the first tap, which looks exactly like a fault that only happens on phones and is not one.

Is there a setting for keyboard behaviour?

No. The panel is a document inside a frame, and the keyboard belongs to the browser and the operating system. The settings control size, position, shape and colour, and none of those change what a keyboard does to a viewport.

Why a width rather than a check for a phone?

Because a width is true and a device name is a guess. A small window on a desktop, a tablet in split screen and a phone all get the same treatment, which is what you want: the decision is about how much room there is, not about what the hardware is called.

Can I turn fullscreen off on phones?

Yes, mobile fullscreen is a setting and it is on by default. Turning it off gives a floating panel at the width and height you set, and you should lower the width at the same time, because the default is wider than a lot of phone screens.