adjusted cropbox max-height calculation to be dynamic

public/less/generics.less

@@ -145,8 +145,7 @@
 
 #crop-picture-modal {
 	#cropped-image {
-		max-width: 50%;
-		max-height: 350px;
+		max-width: 100%;
 	}
 	
 	.cropper-container.cropper-bg {

public/src/modules/pictureCropper.js

@@ -41,7 +41,11 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 					backdrop: 'static',
 				}).modal('show');
 
+				// Set cropper image max-height based on viewport
+				var cropBoxHeight = parseInt($(window).height() / 2, 10);
 				var img = document.getElementById('cropped-image');
+				$(img).css('max-height', cropBoxHeight);
+
 				var cropperTool = new cropper.default(img, {
 					aspectRatio: data.aspectRatio,
 					autoCropArea: 1,