maintain aspect ratio in images

src/components/SourceOverlay.jsx

@@ -141,9 +141,6 @@ class SourceOverlay extends React.Component {
         </svg>
       </div>
     ) : null
-    console.log(this.props)
-    console.log(this.state.idx)
-    console.log(this.props.source.paths.length)
     const forwardArrow = this.state.idx < this.props.source.paths.length - 1 ? (
       <div
         className='next'
@@ -182,7 +179,7 @@ class SourceOverlay extends React.Component {
             <div className='mo-header-close' onClick={this.props.onCancel}>
               <button className='side-menu-burg is-active'><span /></button>
             </div>
-            <div className='mo-header-text'>{this.props.source.title}</div>
+            <div className='mo-header-text'>{this.props.source.title.substring(0, 200)}</div>
           </div>
           <div className='mo-media-container'>
             {this._renderContent(media)}

src/scss/sourceoverlay.scss

@@ -130,6 +130,7 @@ $header-inset: 10px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding: 0 20px;
   }
 
   .mo-box {
@@ -222,7 +223,6 @@ $header-inset: 10px;
   padding: 20px;
   display: flex;
   justify-content: center;
-  // background: $lightwhite;
   box-sizing: border-box;
   padding: 0 calc(50% - 400px);
   overflow-y: scroll;
@@ -245,9 +245,8 @@ $header-inset: 10px;
 .source-image-container, .media-player {
   display: flex;
   justify-content: center;
-  // height: 100%;
-  // min-width: calc(100% - 20px);
   padding: 20px;
+  min-width: calc(100% - 40px);
 }
 
 .media-player {
@@ -260,10 +259,14 @@ $header-inset: 10px;
 }
 
 .source-image, .source-video {
-  // max-width: calc(100% - 20px);
-  // max-height: calc(100% - 20px);
   padding: 0px;
   font-family: 'Lato', Helvetica, sans-serif;
+  max-width: calc(#{$panel-width} - 100px);
+  max-height: $panel-height;
+  margin: auto;
+  width: auto;
+  height: auto;
+  object-fit: contain;
 }
 
 .source-image-loader {