Center small images on mobile

2 files changed, 13 insertions, 3 deletions

diff --git a/client/css/post-content-control.styl b/client/css/post-content-control.styl
index 695895d..6882dd9 100644
--- a/client/css/post-content-control.styl
+++ b/client/css/post-content-control.styl
@@ -4,7 +4,6 @@
 
     text-align: center
     .post-content
-        text-align: left
         margin: 0 auto
         position: relative
 
@@ -16,3 +15,5 @@
             bottom: 0
             width: 100%
             height: 100%
+        img
+            position: relative !important // to center image on small screens
diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js
index ca76e10..aeb75ab 100644
--- a/client/js/controls/post_content_control.js
+++ b/client/js/controls/post_content_control.js
@@ -94,14 +94,23 @@ class PostContentControl {
     }
 
     _resize(width, height) {
-        const resizeListenerNodes = [this._postContentNode].concat(
-            ...this._postContentNode.querySelectorAll('.resize-listener'));
+        this._resizePostContainer(width, height);
+        const resizeListenerNodes = this._postContentNode.querySelectorAll('.resize-listener');
         for (let node of resizeListenerNodes) {
             node.style.width = width + 'px';
             node.style.height = height + 'px';
         }
     }
 
+    _resizePostContainer(width, height) {
+        // on mobile don't make the image narrower than the screen, so that small images are centered
+        if (screen.width < 1000) {
+            width = Math.max(screen.width, width);
+        }
+        this._postContentNode.style.width = width + 'px';
+        this._postContentNode.style.height = height + 'px';
+    }
+
     _refreshSize() {
         this._currentFitFunction();
     }