Fixing LHS scroll and Image previews

web/react/components/sidebar.jsx

@@ -173,6 +173,10 @@ export default class Sidebar extends React.Component {
         this.updateScrollbar();
 
         window.addEventListener('resize', this.handleResize);
+
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
     }
     shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areObjectsEqual(nextState, this.state)) {
@@ -199,6 +203,7 @@ export default class Sidebar extends React.Component {
             windowWidth: Utils.windowWidth(),
             windowHeight: Utils.windowHeight()
         });
+        console.log('sad');
     }
     updateScrollbar() {
     }

web/react/components/view_image.jsx

@@ -424,23 +424,26 @@ export default class ViewImageModal extends React.Component {
                 >
                     <div
                         className={'image-wrapper ' + bgClass}
-                        onMouseEnter={this.onMouseEnterImage}
-                        onMouseLeave={this.onMouseLeaveImage}
                         onClick={(e) => e.stopPropagation()}
                     >
                         <div
-                            className={closeButtonClass}
+                            onMouseEnter={this.onMouseEnterImage}
-                            onClick={this.props.onModalDismissed}
+                            onMouseLeave={this.onMouseLeaveImage}
-                        />
+                        >
-                        {content}
+                            <div
-                        <ViewImagePopoverBar
+                                className={closeButtonClass}
-                            show={this.state.showFooter}
+                                onClick={this.props.onModalDismissed}
-                            fileId={this.state.imgId}
+                            />
-                            totalFiles={this.props.filenames.length}
+                            {content}
-                            filename={name}
+                            <ViewImagePopoverBar
-                            fileURL={fileUrl}
+                                show={this.state.showFooter}
-                            getPublicLink={this.getPublicLink}
+                                fileId={this.state.imgId}
-                        />
+                                totalFiles={this.props.filenames.length}
+                                filename={name}
+                                fileURL={fileUrl}
+                                getPublicLink={this.getPublicLink}
+                            />
+                        </div>
                     </div>
                     {leftArrow}
                     {rightArrow}

web/sass-files/sass/partials/_modal.scss

@@ -3,6 +3,7 @@
 }
 .modal-body {
 	padding: 20px 15px;
+	overflow: auto;
 }
 .modal {
 	width: 100%;
@@ -47,9 +48,6 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
-	.modal-body {
-		overflow: auto;
-	}
 	.modal-push-down {
 		margin-top: 5%;
 	}
@@ -195,21 +193,35 @@
 		width:100%;
 		height: 100%;
 		margin: 0 auto;
+		max-width: 100%;
+
+		.modal-body {
+			@include clearfix;
+			height: 100%;
+			display: table;
+			table-layout: fixed;
+			width: 100%;
+			max-height: 100%;
+		}
+
 		.image-wrapper {
 			position: relative;
 			max-width: 90%;
-			min-height: 100px;
-			min-width: 320px;
 			@include border-radius(3px);
-			display: table;
+			display: table-cell;
-			margin: 0 auto;
+			vertical-align: middle;
+			text-align: center;
+			width: 100%;
+
 			&:hover {
 				@include border-radius(3px 3px 0 0);
 			}
+
 			&.default {
 				width: 100%;
 				height: 80%;
 			}
+
 			.modal-close {
 				background: url("../images/close.png") no-repeat;
 				@include background-size(100% 100%);
@@ -225,24 +237,31 @@
 				transition: opacity 0.6s;
 				cursor: pointer;
 				z-index: 9999;
+
 				&.modal-close--show {
 					@include opacity(1);
 				}
+
 			}
-			> a {
+
+			> div {
+				min-height: 100px;
+				min-width: 320px;
 				background: #FFF;
-				display: table-cell;
+				display: inline-block;
-				vertical-align: middle;
 				position: relative;
 
 				&:hover .file-playback-controls.stop {
 					@include opacity(1);
 				}
+
 			}
+
 			img {
 				max-width: 100%;
 				max-height: 100%;
 			}
+
 			.spinner.file__loading {
 				z-index: 2;
 				position: absolute;
@@ -259,7 +278,6 @@
 			height: 100%;
 			padding: 0;
 			border: none;
-			display: table;
 		}
 		.image-body {
 			vertical-align: middle;

web/sass-files/sass/partials/_responsive.scss

@@ -621,8 +621,10 @@
     .modal {
         .modal-image {
             .image-wrapper {
-                font-size: 12px;
+                > div {
-                min-width: 250px;
+                    font-size: 12px;
+                    min-width: 250px;
+                }
                 .modal-close {
                     @include opacity(1);
                 }