Merge pull request #4083 from LLK/develop

Merge develop

package-lock.json

@@ -15721,9 +15721,9 @@
       }
     },
     "scratch-gui": {
-      "version": "0.1.0-prerelease.20200603203751",
-      "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20200603203751.tgz",
-      "integrity": "sha512-LbCBQZsrNlcNLUHA4gwMLjLIV3tiIwE4BWykV87qXrPVqzVkdO/l9spX+GdTHtjrutg6RB5mk6HbnU8WJbmBSw==",
+      "version": "0.1.0-prerelease.20200610141359",
+      "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20200610141359.tgz",
+      "integrity": "sha512-hQthP7RbbISmq67+Ivo4djxKAiEO8Bj/pyZWs9BTTyD20zeNPZfxaNffoNOK/uxX4kwvs8kuCZP/8hz9k7mQ0A==",
       "dev": true
     },
     "scratch-l10n": {

package.json

@@ -128,7 +128,7 @@
     "redux-mock-store": "^1.2.3",
     "redux-thunk": "2.0.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20200603203751",
+    "scratch-gui": "0.1.0-prerelease.20200610141359",
     "scratch-l10n": "latest",
     "selenium-webdriver": "3.6.0",
     "slick-carousel": "1.6.0",

src/views/preview/preview.scss

@@ -38,9 +38,11 @@ $stage-width: 480px;
 
     .inner {
         margin: 0 auto;
+        overflow: auto;
 
         @media #{$medium-and-smaller} {
-            max-width: 90%;
+            // subtract page padding
+            max-width: calc(100% - 1rem);
         }
 
         @media #{$intermediate} {
@@ -146,7 +148,8 @@ $stage-width: 480px;
         flex-grow: 1;
 
         @media #{$medium-and-smaller} {
-            min-width: calc(100% - 2rem);
+            // subtract margin and border
+            min-width: calc(100% - 2rem - 4px);
         }
     }
 
@@ -362,7 +365,7 @@ $stage-width: 480px;
     .guiPlayer {
         display: inline-block;
         position: relative;
-        width: $player-width;
+        max-width: $player-width;
         z-index: 1;
 
         $alert-bg: rgba(255, 255, 255, .85);
@@ -421,7 +424,7 @@ $stage-width: 480px;
         border-radius: 8px;
         background-color: $ui-blue-10percent;
         padding: .75rem;
-        width: calc(100% - 1.5rem);
+        width: calc(100% - 1.5rem - 2px);
         flex-wrap: nowrap;
         align-items: center;
         justify-content: flex-start;
@@ -476,6 +479,7 @@ $stage-width: 480px;
         line-height: 1.5rem;
         flex: 1;
         overflow-wrap: break-word;
+        word-break: break-word;
     }
 
     .project-description:last-of-type {