Style media gallery controls

src/components/Md.jsx

@@ -25,7 +25,7 @@ class Md extends React.Component {
   render() {
     if (this.state.md && !this.state.error) {
       return (
-        <div dangerouslySetInnerHTML={{ __html: this.state.md }} />
+        <div className="md-container" dangerouslySetInnerHTML={{ __html: this.state.md }} />
       )
     } else if (this.state.error) {
       return this.props.unloader || <div>Error: couldn't load source</div>

src/components/SourceOverlay.jsx

@@ -139,11 +139,16 @@ class SourceOverlay extends React.Component {
   }
 
   _renderControls() {
+    if (this.props.source.paths.length > 1) {
+      return (
+        <div className="media-gallery-controls">
+          <div className="back" onClick={() => this.onShiftGallery(-1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
+          <div className="next" onClick={() => this.onShiftGallery(1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
+        </div>
+      );  
+    }
     return (
-      <React.Fragment>
-        <div className="back" onClick={() => this.onShiftGallery(-1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
-        <div className="next" onClick={() => this.onShiftGallery(1)}><svg><path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"></path></svg></div>
-      </React.Fragment>
+      <div className="media-gallery-controls"></div>
     );
   }
 
@@ -165,8 +170,8 @@ class SourceOverlay extends React.Component {
             <div className="mo-header-text">{this.props.source.title}</div>
           </div>
           <div className="mo-media-container">
-            {(media.length > 1) ? this._renderControls() : ''}
             {this._renderContent(media)}
+            {this._renderControls()}
           </div>
           <div className="mo-meta-container">
             <div className="mo-box-title">

src/scss/mediaoverlay.scss

@@ -71,7 +71,6 @@ $header-inset: 10px;
     font-family: "Lato", Helvetica, sans-serif;
   }
   .back, .next {
-    position: absolute;
     width: 30px;
     height: 30px;
     background: $darkgrey;
@@ -79,10 +78,18 @@ $header-inset: 10px;
     cursor: pointer;
     box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
     svg path { fill: $offwhite; }
+    z-index: 1;
   }
 
-  .back { left: 10px; svg path { transform: translate(17px,15px)rotate(-90deg)} }
-  .next { right: 10px; svg path { transform: translate(17px,15px)rotate(90deg)} }
+  .back {
+    left: 10px;
+    svg path { transform: translate(17px,15px)rotate(-90deg)}
+  }
+  .next {
+    margin-left: calc(100% - 60px);
+    right: 10px;
+    svg path { transform: translate(17px,15px)rotate(90deg)}
+  }
 }
 
 .mo-header {
@@ -114,10 +121,11 @@ $header-inset: 10px;
 .mo-media-container {
   background-color: rgba(239, 239, 239, 0.9);
   flex: 1;
-  display: flex;
+  /*display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: center;*/
+  display: inline-block;
   overflow-x: hidden;
   box-sizing: border-box;
   width: 100%;
@@ -135,6 +143,14 @@ $header-inset: 10px;
     flex-direction: column;
   }
 
+  .media-gallery-controls {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -50%;
+  }
+
   // NB: topcushion seems to be necessary with certain overflows..
   &.topcushion {
     padding-top: 150px;
@@ -280,6 +296,11 @@ $header-inset: 10px;
     border-bottom: 1px solid $red;
     &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; }
   }
+
+  .md-container {
+    width: 100%;
+    overflow-wrap: break-word;
+  }
 }
 
 .source-image-container, .media-player {