From 07a09f5a9379c5450990320b90686b6665c066e9 Mon Sep 17 00:00:00 2001
From: Nate Wright <natew@notthisway.com>
Date: Tue, 17 Nov 2015 15:07:30 +0000
Subject: [PATCH] pkp/pkp-lib#836 Prevent dropdown menus from opening
 off-screen

---
 plugins/themes/default/styles/helpers.less | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/plugins/themes/default/styles/helpers.less b/plugins/themes/default/styles/helpers.less
index 8136ebef7d5..01e33d3bcd8 100644
--- a/plugins/themes/default/styles/helpers.less
+++ b/plugins/themes/default/styles/helpers.less
@@ -55,7 +55,7 @@
 		left: -9999px;
 		z-index: 1000;
 		width: 15em;
-    margin: 0;
+		margin: 0;
 		padding: 0;
 		background: @primary-lift;
 
@@ -87,6 +87,26 @@
 		left: 0;
 	}
 
+	// Ensure a dropdown doesn't open beyond the edge of the screen by aligning
+	// such dropdowns to the right rather than the left.
+	li.align_right:hover > ul,
+	li.align_right:focus > ul,
+	li.align_right.in_focus > ul {
+		left: auto;
+		// Position in center on very small screens to prevent if from flying
+		// off to the left. Not a perfect solution, but should suffice for the
+		// overwhelming majority of cases
+		width: 10em;
+		right: 50%;
+		.transform(translateX(50%));
+
+		@media(min-width: @screen-phone) {
+			right: 0;
+			.transform(none);
+			width: 15em;
+		}
+	}
+
 	// Dropdown caret indicating submenus
 	// @todo these can probably abstracted into reusable components
 	.has-submenu > a:after {