Design: Finger-friendly UI for mobile device

(Make bigger UI on mobile)

User story

Today, our UI looks a bit too small for mobile device and not finger-friendly, especially for the send box.

Today's layout is based on desktop or tablet. It is not designed for mobile. I think from the trend of use, Web Chat is starting to become a narrow-and-tall component, than a full-screen full-width component.

Alternatives

User could manually modify the height of the send box and other components. It will just not default for them.

Other implementations

We should refer to Apple UI guideline for the size of on-screen elements that requires to be finger-friendly.

Potential implementation

Since we need to know the width of Web Chat before deciding the height of the send box, I am unsure if there are any CSS ways to do that. If not, I don't think we should use JavaScript for width detection.

On the other hand, we might be able to use font size to deduce the height of send box.

[Enhancement]

The issue does not name files, tests, or an entry point. Start by locating the Web Chat send box and responsive UI styles, then review the Apple UI guideline for finger-friendly sizing. Done means the mobile layout and send box are demonstrably easier to use without requiring JavaScript width detection.