first steps of making the elements more readable on mobile

labs/meteor-client/app/client/stylesheets/chat.less

@@ -151,11 +151,15 @@
     height: 15%;
   }
   @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    height: 60px;
+    font-size: 3vh;
   }
-  @media @mobile-portrait-with-keyboard,
-    @desktop-portrait,
-    @mobile-portrait {
+  @media @mobile-portrait-with-keyboard {
+    height: 60%;
+  }
+  @media @mobile-portrait {
+    height: 40%;
+  }
+  @media @desktop-portrait {
     font-size: 25px;
   }
 }

labs/meteor-client/app/client/stylesheets/style.less

@@ -253,7 +253,7 @@ body {
     font-size: 14px;
   }
   @media @mobile-portrait, @mobile-portrait-with-keyboard {
-    font-size: 30px;
+    font-size: 3vh;
   }
 }
 

labs/meteor-client/app/client/stylesheets/users.less

@@ -4,6 +4,7 @@
   margin-top: 10px;
   overflow: hidden;
   width: 100%;
+  background: #efeaea;
 }
 
 #usericons {
@@ -12,6 +13,12 @@
     margin-left: 3px;
     padding: 2px;
     border: 1px solid white;
+    @media @desktop-portrait {
+      font-size: 25px;
+    }
+    @media @mobile-portrait {
+      font-size: 5vh;
+    }
   }
   .raisedHandIcon, .muteIcon {
     &:hover { 
@@ -34,9 +41,10 @@
   }
   @media @desktop-portrait {
     height: 25px;
+    font-size: 3vh;
   }
-  @media @desktop-portrait, @mobile-portrait {
-    font-size: 2vh;
+  @media @mobile-portrait, @mobile-portrait-with-keyboard {
+    font-size: 4vh;
   }
 }
 
@@ -52,12 +60,15 @@
     order: 1;
     min-width: 0;
   }
-  @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
+  @media @desktop-portrait, @mobile-portrait {
     -webkit-order: 3;
     order: 3;
     margin-bottom: 0px;
     padding-bottom: 55px; /*so that the footer does not overlap */
   }
+  @media @mobile-portrait-with-keyboard {
+    display: none; //hide when typing
+  }
 }
 
 #user-contents {
@@ -71,7 +82,7 @@
       padding-left: 10px;
       padding-right: 10px;
     }
-    @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
+    @media @desktop-portrait, @mobile-portrait {
       max-height: 40vh; //for longer userlist a scrollbar appears
     }
   }