diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css index 2a4de1a252be6c1f4e70893f462493fc8fd18886..63e6868326617b20c9ae347b20a71f29400c195c 100644 --- a/src/components/asset-panel/selector.css +++ b/src/components/asset-panel/selector.css @@ -1,4 +1,5 @@ @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; + } +} diff --git a/src/css/units.css b/src/css/units.css index 3de6174a2fe38b65148f7d99a5e459950e37160a..3e7f73f36d327fa55f464c4b49577661f58b4799 100644 --- a/src/css/units.css +++ b/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; diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js index 672c8013f58d477ae767a159a3d2af28784d7139..67c2ae44cc0ecc3c8b979626d4ba51e85a176b63 100644 --- a/src/lib/layout-constants.js +++ b/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 };