Fix fullscreen structure in IE11

Due to how Internet Explorer 11 sorts CSS rules based on their selector
and how the "#app-content" left margin is set in the server it is
necessary to set the ":fullscreen" rule as important to override the one
from the server, which is sorted above it (unlike in the rest of
browsers).

Besides that, the top space added to the sidebar when IE is used needs
to be removed in fullscreen mode, as in that case there is no header.
The sidebar height also needs to be explicitly set to 100% due to the
lack of support for "unset" in Internet Explorer 11.

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

1 files changed, 11 insertions, 1 deletions

diff --git a/css/style.scss b/css/style.scss
index 8583eb2a3..805acbc50 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -389,12 +389,22 @@ input[type="password"] {
 	margin-left: 0;
 }
 #content:-ms-fullscreen #app-content {
-	margin-left: 0;
+	margin-left: 0 !important;
 }
 #content:fullscreen #app-content {
 	margin-left: 0;
 }
 
+#content:-ms-fullscreen #app-sidebar {
+	/* The sidebar height is unset in Talk to override the "100vh-50px" set in
+	 * server and force it to get the full height in fullscreen mode. However,
+	 * IE11 does not support "unset", so the height needs to be explicitly set
+	 * to 100%. */
+	height: 100%;
+	/* Remove the space added when IE is used to not overlap with the header. */
+	top: 0;
+}
+
 /* Set the background of the content to the same colour as the app content and
  * the app sidebar to prevent a black background from appearing when the sidebar
  * is shown or hidden.