Merge branch 'develop' into project-og-title-fix

Author: Rishab87

client/modules/App/components/Overlay.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useRef } from 'react';
+import MediaQuery from 'react-responsive';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -54,7 +55,7 @@ const Overlay = ({
           <header className="overlay__header">
             <h2 className="overlay__title">{title}</h2>
             <div className="overlay__actions">
-              {actions}
+              <MediaQuery minWidth={770}>{actions}</MediaQuery>
               <button
                 className="overlay__close-button"
                 onClick={close}
@@ -64,6 +65,11 @@ const Overlay = ({
               </button>
             </div>
           </header>
+          <MediaQuery maxWidth={769}>
+            {actions && (
+              <div className="overlay__actions-mobile">{actions}</div>
+            )}
+          </MediaQuery>
           {children}
         </section>
       </div>

client/modules/IDE/components/SketchList.jsx

@@ -178,6 +178,7 @@ class SketchListRowBase extends React.Component {
             onBlur={this.handleRenameBlur}
             onClick={(e) => e.stopPropagation()}
             ref={this.renameInput}
+            maxLength={128}
           />
         )}
       </React.Fragment>

client/styles/components/_overlay.scss

@@ -51,6 +51,10 @@
   display: flex;
 }
 
+.overlay__actions-mobile {
+  padding-left: #{24/ $base-font-size}rem;
+}
+
 .overlay__title {
   font-size: #{math.div(21, $base-font-size)}rem;
 }

client/styles/components/_sketch-list.scss

@@ -164,6 +164,7 @@
 
 .sketches-table th {
   font-weight: normal;
+  overflow-wrap: break-word;
 }
 
 .sketches-table__name {