Fixed inset for mobile devices on MediaModal

• Fixed:
- inset for mobile devices on MediaModal

app/javascript/gabsocial/components/modal/media_modal.js

@@ -130,29 +130,6 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex()
 
-    const leftNav = media.size > 1 && (
-      <Button
-        tabIndex='0'
-        backgroundColor='black'
-        className={[_s.py15, _s.posFixed, _s.top50PC, _s.left0, _s.mt10, _s.ml10].join(' ')}
-        onClick={this.handlePrevClick}
-        aria-label={intl.formatMessage(messages.previous)}
-        icon='arrow-left'
-        iconSize='18px'
-      />
-    )
-    const rightNav = media.size > 1 && (
-      <Button
-        tabIndex='0'
-        backgroundColor='black'
-        className={[_s.py15, _s.posFixed, _s.top50PC, _s.right0, _s.mt10, _s.mr10].join(' ')}
-        onClick={this.handleNextClick}
-        aria-label={intl.formatMessage(messages.next)}
-        icon='arrow-right'
-        iconSize='18px'
-      />
-    )
-
     const content = media.map((image) => {
       const width = image.getIn(['meta', 'original', 'width']) || null
       const height = image.getIn(['meta', 'original', 'height']) || null
@@ -218,10 +195,6 @@ class MediaModal extends ImmutablePureComponent {
 
     const navigationClasses = CX({
       default: 1,
-      saveAreaInsetPT: 1,
-      saveAreaInsetPR: 1,
-      saveAreaInsetPB: 1,
-      saveAreaInsetPL: 1,
       displayNone: navigationHidden,
     })
 
@@ -251,17 +224,42 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClasses}>
+          <div className={[_s.posFixed, _s.top0, _s.right0, _s.mt10, _s.mr10, _s.saveAreaInsetPT, _s.saveAreaInsetPR].join(' ')}>
             <Button
               title={intl.formatMessage(messages.close)}
               icon='close'
               backgroundColor='black'
               onClick={onClose}
               iconSize='14px'
-            className={[_s.py15, _s.posFixed, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}
+              className={_s.py15}
             />
+          </div>
 
-          {leftNav}
+          {
-          {rightNav}
+            media.size > 1 &&
+            <Button
+              tabIndex='0'
+              backgroundColor='black'
+              className={[_s.py15, _s.posFixed, _s.top50PC, _s.left0, _s.mt10, _s.ml10].join(' ')}
+              onClick={this.handlePrevClick}
+              aria-label={intl.formatMessage(messages.previous)}
+              icon='arrow-left'
+              iconSize='18px'
+            />
+          }
+
+          {
+            media.size > 1 &&
+            <Button
+              tabIndex='0'
+              backgroundColor='black'
+              className={[_s.py15, _s.posFixed, _s.top50PC, _s.right0, _s.mt10, _s.mr10].join(' ')}
+              onClick={this.handleNextClick}
+              aria-label={intl.formatMessage(messages.next)}
+              icon='arrow-right'
+              iconSize='18px'
+            />
+          }
 
           { /** : todo : 
             status &&
@@ -277,13 +275,15 @@ class MediaModal extends ImmutablePureComponent {
 
         {
           media.size > 1 &&
-          <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
+          <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
+            <div className={[_s.default, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
               <Pagination
                 count={media.size}
                 activeIndex={index}
                 onClick={this.handleChangeIndex}          
               />
             </div>
+          </div>
         }
       </div>
     )