Added styled component to AddToCollectionSketchList and updated the css code for responsiveness

Author: adityagarg06

client/modules/IDE/components/AddToCollectionList.jsx

@@ -19,18 +19,16 @@ const projectInCollection = (project, collection) =>
   collection.items.find((item) => item.projectId === project.id) != null;
 
 const CollectionAddSketchWrapper = styled.div`
-  &&& {
-    min-width: ${remSize(600)};
-    overflow: auto;
-  }
+  width: ${remSize(600)};
+  max-width: 100%;
+  overflow: auto;
 `;
 
 const QuickAddWrapper = styled.div`
-  &&& {
-    min-width: ${remSize(600)};
-    padding: ${remSize(24)};
-    height: 100%;
-  }
+  width: ${remSize(600)};
+  max-width: 100%;
+  padding: ${remSize(24)};
+  height: 100%;
 `;
 
 class CollectionList extends React.Component {
@@ -106,7 +104,6 @@ class CollectionList extends React.Component {
           <Helmet>
             <title>{this.getTitle()}</title>
           </Helmet>
-
           {content}
         </QuickAddWrapper>
       </CollectionAddSketchWrapper>

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -5,13 +5,28 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
 // import find from 'lodash/find';
+import styled from 'styled-components';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
 import * as ToastActions from '../actions/toast';
 import * as SortingActions from '../actions/sorting';
 import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
+import { remSize } from '../../../theme';
+
+const CollectionAddSketchWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  overflow: auto;
+`;
+
+const QuickAddWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  padding: ${remSize(24)};
+  height: 100%;
+`;
 
 class SketchList extends React.Component {
   constructor(props) {
@@ -81,14 +96,14 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="collection-add-sketch">
-        <div className="quick-add-wrapper">
+      <CollectionAddSketchWrapper>
+        <QuickAddWrapper>
           <Helmet>
             <title>{this.getSketchesTitle()}</title>
           </Helmet>
           {content}
-        </div>
-      </div>
+        </QuickAddWrapper>
+      </CollectionAddSketchWrapper>
     );
   }
 }

client/styles/components/_collection.scss

@@ -84,11 +84,6 @@
   width: 100%;
 }
 
-.collection-add-sketch {
-  min-width: #{600 / $base-font-size}rem;
-  overflow: auto;
-}
-
 .collection-share {
   text-align: right;
   position: relative;

client/styles/components/_quick-add.scss

@@ -1,9 +1,3 @@
-.quick-add-wrapper {
-  min-width: #{600 / $base-font-size}rem;
-  padding: #{24 / $base-font-size}rem;
-  height: 100%;
-}
-
 .quick-add {
   width: auto;
   overflow-y: auto;