message box or mail box works perfectly fine for desktop version but as for mobile devices the user cannot minimize message cap. I tried in the base CSS to decrease the height of the message box by around 40% but seems helpless.
Look at this post I did for this problem. You can apply those to @media queries to just size them for mobile dievice size. One additional thing I did was change the height of the mail message box to also get it to fit on mobile. When the keyboard popped up it shifted the input boxes at the top under the mobile header. Here is the code I used to size that. If you simply apply it without @media queries it will also resize them for the desktop view as well.