changed tablet width to 768; several responsive tweaks

src/_frameless.scss

@@ -35,7 +35,7 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$tablet: 640px;
+$tablet: 768px;
 $mobile: 480px;
 
 /* Media Queries */

src/lib/frameless.js

@@ -3,7 +3,7 @@
  */
 const frameless = {
     desktop: 942,
-    tablet: 640,
+    tablet: 768,
     mobile: 480
 };
 

src/views/preview/comment/comment.scss

@@ -1,4 +1,5 @@
 @import "../../../colors";
+@import "../../../frameless";
 
 .compose-comment {
     margin-left: .5rem;
@@ -228,6 +229,14 @@
                     content: "";
                 }
             }
+
+            /* hide comment input on tablets and mobile */
+            @media #{$medium-and-smaller} {
+                .comment-reply {
+                    display: none;
+                }
+            }
+
         }
     }
 
@@ -256,6 +265,13 @@
     margin-bottom: 1.5rem;
 }
 
+/* hide comment input on tablets and mobile */
+@media #{$medium-and-smaller} {
+    .comments-root-reply {
+        display: none;
+    }
+}
+
 .comment-reply-row {
     margin-top: 1.5rem;
     margin-left: .5rem;

src/views/preview/presentation.jsx

@@ -187,7 +187,7 @@ const PreviewPresentation = ({
 
     const extensionChips = (
         <FlexRow className="extension-list">
-            {extensions && extensions.map(extension => (
+            {extensions.map(extension => (
                 <ExtensionChip
                     action={extension.action}
                     extensionL10n={extension.l10nId}
@@ -345,6 +345,7 @@ const PreviewPresentation = ({
                             </div>
                             <MediaQuery maxWidth={frameless.tablet - 1}>
                                 <FlexRow className="preview-row force-center">
+                                    <div className="wrappable-item">
                                         <Stats
                                             faved={faved}
                                             favoriteCount={favoriteCount}
@@ -354,6 +355,8 @@ const PreviewPresentation = ({
                                             onFavoriteClicked={onFavoriteClicked}
                                             onLoveClicked={onLoveClicked}
                                         />
+                                    </div>
+                                    <div className="wrappable-item">
                                         <Subactions
                                             addToStudioOpen={addToStudioOpen}
                                             canReport={canReport}
@@ -370,6 +373,7 @@ const PreviewPresentation = ({
                                             onReportSubmit={onReportSubmit}
                                             onToggleStudio={onToggleStudio}
                                         />
+                                    </div>
                                 </FlexRow>
                             </MediaQuery>
                             <FlexRow className="project-notes">
@@ -377,9 +381,11 @@ const PreviewPresentation = ({
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
                                 <MediaQuery maxWidth={frameless.tablet - 1}>
+                                    {extensions &&
                                         <FlexRow className="preview-row">
                                             {extensionChips}
                                         </FlexRow>
+                                    }
                                 </MediaQuery>
                                 {showInstructions && (
                                     <div className="description-block">

src/views/preview/preview.scss

@@ -110,6 +110,9 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            .inplace-input {
+                width: calc(100% - 4rem);
+            }
         }
 
         @media #{$small} {
@@ -141,7 +144,7 @@ $stage-width: 480px;
         flex-grow: 1;
 
         @media #{$medium-and-smaller} {
-            min-width: 100%;
+            min-width: calc(100% - 2rem);
         }
     }
 
@@ -341,6 +344,16 @@ $stage-width: 480px;
                 flex-direction: row;
             }
         }
+
+        .wrappable-item {
+            margin-bottom: .5rem;
+        }
+    }
+
+    @media #{$medium-and-smaller} {
+        .preview-row {
+            align-items: center;
+        }
     }
 
     .guiPlayer {
@@ -384,7 +397,7 @@ $stage-width: 480px;
         flex-flow: column;
 
         @media #{$medium-and-smaller} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             margin-left: 0;
             width: 100%;
         }
@@ -537,7 +550,7 @@ $stage-width: 480px;
         margin-top: 1rem;
         background-color: $ui-blue-10percent;
         padding: 1rem 0;
-        min-height: 12rem;
+        min-height: 6rem;
     }
 
     .create-comment {

src/views/preview/subactions.scss

@@ -2,7 +2,6 @@
 @import "../../frameless";
 
 .subactions {
-    margin-left: 1.5rem;
     justify-content: flex-end;
     align-items: flex-start;
     flex: 1;
@@ -20,7 +19,7 @@
         font-size: .875rem;
 
         @media #{$small} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             width: 100%;
             order: 100;
         }