Composer Mobile vh

010101

This seems to work better for me in the new IE (Safari iOS) and may be a little better for all mobile browsers.

How about using the viewport height measurement unit for the composer box height on mobile?

@media @phone {
.Composer:not(.minimized) {
      height: 49vh;
   }
}

You can change 49 to 50. Or, 48. This is a percentage. It is saying to make the height 49% of the viewport height. I went with 49 because I wanted to ensure there was always a bit of a gap between the composer box and keyboard. Which signals to the user, “don’t forget, the thread is behind here if you need to take a look.” At one point while using 50vh, there was no gap. My brain likes extra reassurance and 49vh gives me that. 😅

Currently, height is in pixels. But there are all different phone heights and maybe each phone has a keyboard at a different height. It just feels like viewport height percentage, for mobile, is a good way to go.

If you test this by just sticking this in the admin CSS box, you must add !important:

@media @phone {
.Composer:not(.minimized) {
      height: 49vh !important;
   }
}