Fix chat height in the main view of public pages

The header element contains the header div; as the header div uses a
fixed position the header element has no height, so an explicit height
was set for it to prevent "#app-content-wrapper" from overlapping with
the header element. However, as "#app-content-wrapper" has a 100% height
that caused the "#app-content-wrapper" to be moved 45px to the bottom,
and thus the chat view was partially cropped at the bottom.

When the chat view messages are shown from newest to oldest this causes
the first messages to be out of view, but when they are shown from
oldest to newest with the new message input at the bottom then the input
is partially out of view.

Now instead of giving the header an explicit height a "padding-top" is
set for the "#app-content-wrapper"; this prevents the contents from
being cropped while also preventing them from overlapping the header.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/style.scss

@@ -762,10 +762,11 @@ video {
 }
 
 /* The header element contains the header div; as the header div uses a fixed
-   position the header element has no height, so it must be explicitly set to
-   prevent #app-content-wrapper from overlapping with the header element */
-#body-public header {
-	height: 45px;
+   position the header element has no height, and as #app-content-wrapper uses a
+   "100%" height its contents must be padded to prevent them from overlapping
+   with the header element */
+#body-public #app-content-wrapper {
+	padding-top: 45px;
 }
 
 /* make blue header bar transparent in shared room */