From 5489514d7a7ae410229550c179fc6bc1f1dfd3ed Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 18 Jan 2017 15:38:34 +0000
Subject: [PATCH] Add some compatibility style rules for IE10.

---
 .../web/app/views/project/editor/review-panel.jade  |  1 +
 .../public/stylesheets/app/editor/review-panel.less | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade
index 0419884502..ccb5cb035f 100644
--- a/services/web/app/views/project/editor/review-panel.jade
+++ b/services/web/app/views/project/editor/review-panel.jade
@@ -1,6 +1,7 @@
 #review-panel
 	.review-panel-toolbar
 		resolved-comments-dropdown(
+			class="rp-flex-block"
 			entries="reviewPanel.resolvedComments"
 			threads="reviewPanel.commentThreads"
 			resolved-ids="reviewPanel.resolvedThreadIds"
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 54142f2dcc..5de21f913a 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -32,6 +32,7 @@
 
 
 .rp-button() {
+	display: block; // IE doesn't do flex with inline items.
 	background-color: @rp-highlight-blue;
 	color: #FFF;
 	text-align: center;
@@ -119,6 +120,7 @@
 	.rp-size-expanded & {
 		display: flex;
 		align-items: center;
+		justify-content: space-around;
 		padding: 0 5px;
 	}
 	// .rp-state-current-file & {
@@ -592,6 +594,7 @@
 	z-index: 2;
 }
 	.rp-nav-item {
+		display: block;
 		color: lighten(@rp-type-blue, 25%);
 		flex: 0 0 50%;
 		border-top: solid 3px transparent;
@@ -813,7 +816,8 @@
 	}
 }
 	.resolved-comments-scroller {
-		flex: 0 0 100%;
+		flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
+		width: 100%; // We need to set the width explicitly, as flex-basis won't work.
 		padding: 5px;
 		overflow-y: auto;
 	}
@@ -865,3 +869,10 @@
 		display: block;
 	}
 }
+
+// Helper class for elements which aren't treated as flex-items by IE10, e.g:
+// * inline items;
+// * unknown elements (elements which aren't standard DOM elements, such as custom element directives)
+.rp-flex-block {
+	display: block;
+}