Make selector column responsive to paint editor width

This is for https://github.com/LLK/scratch-paint/pull/194, making the selector area smaller on tablet so as to create more space for the paint editor

src/components/asset-panel/selector.css

 @import "../../css/colors.css";
+@import "../../css/units.css";
 
 .wrapper {
     width: 150px;
@@ -51,3 +52,14 @@
     min-height: 5rem;
     margin: 1rem auto;
 }
+
+@media only screen and (max-width: $full-size-paint) {
+    .wrapper {
+        width: 80px;
+    }
+
+    .list-item {
+        width: 4rem;
+        min-height: 4rem;
+    }
+}

src/css/units.css

@@ -9,3 +9,7 @@ $stage-menu-height: 2.75rem;
 $library-header-height: 4.375rem;
 
 $form-radius: calc($space / 2);
+
+/* layout contants from `layout-constants.js` */
+$full-size: 1095px;
+$full-size-paint: 1249px;

src/lib/layout-constants.js

@@ -3,5 +3,6 @@ export default {
     fullStageHeight: 360,
     smallerStageWidth: 480 * 0.85,
     smallerStageHeight: 360 * 0.85,
-    fullSizeMinWidth: 1096
+    fullSizeMinWidth: 1096,
+    fullSizePaintMinWidth: 1250
 };