Merge pull request #2518 from benjiwheeler/small-player-project-page

Fix page width by hiding overflow, letting stage width be flexible

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 {