diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css index 535c38b0be684e8ac55d3cec8446cf758cd00833..ad24ed954cce064b6be9f20bac7c5e781d88bd97 100644 --- a/src/components/asset-panel/selector.css +++ b/src/components/asset-panel/selector.css @@ -56,7 +56,7 @@ $fade-out-distance: 100px; .list-item { width: 5rem; - min-height: 5rem; + height: 5rem; margin: 0.5rem auto; } diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css index ad7644c64b9ca89e8f50618bb9db650e89d0aee1..de7bc72d21276ceabbbdb691f07682f08dc75ecc 100644 --- a/src/components/backpack/backpack.css +++ b/src/components/backpack/backpack.css @@ -69,9 +69,17 @@ } .backpack-item { - min-width: 4rem; - max-width: 6rem; + width: 4rem; + height: 4.5rem; margin: 0 0.25rem; + + /* Need to hide overflow because of background setting below */ + overflow: hidden; +} + +.backpack-item > div { + /* Need to set the background to get blend-mode below to work */ + background: $ui-primary; } .backpack-item img { diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index 7a2c1f4cea61ece8df041a7ae9bb05502a8d4652..ee20c444c364a0deb6ab020077d0560e5a785e34 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/src/components/sprite-selector-item/sprite-selector-item.css @@ -39,8 +39,24 @@ filter: drop-shadow(0px 0px 2px $ui-black-transparent); } +/* Outer/Inner chicanery is to prevent layouts when sprite image changes */ +.sprite-image-outer { + position: relative; + width: 100%; + height: 100%; + transform: translateZ(0); +} + +.sprite-image-inner { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + .sprite-image { - margin: auto; user-select: none; pointer-events: none; max-width: 32px; diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index c1f86de49a9fc05893838ac5a208fdd0630d0308..918d6084e340f29479ac239094b07d12d941d49f 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -37,11 +37,15 @@ const SpriteSelectorItem = props => ( <div className={styles.number}>{props.number}</div> )} {props.costumeURL ? ( - <img - className={styles.spriteImage} - draggable={false} - src={props.costumeURL} - /> + <div className={styles.spriteImageOuter}> + <div className={styles.spriteImageInner}> + <img + className={styles.spriteImage} + draggable={false} + src={props.costumeURL} + /> + </div> + </div> ) : null} <div className={styles.spriteInfo}> <div className={styles.spriteName}>{props.name}</div> diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap index 14577a5f48bab0d87fb4651a5a75fa53574c5493..e0224d77c1913cf1c23c9d986b364b401e241d2b 100644 --- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap +++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap @@ -30,11 +30,19 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de > 5 </div> - <img + <div className={undefined} - draggable={false} - src="https://scratch.mit.edu/foo/bar/pony" - /> + > + <div + className={undefined} + > + <img + className={undefined} + draggable={false} + src="https://scratch.mit.edu/foo/bar/pony" + /> + </div> + </div> <div className={undefined} > @@ -107,11 +115,19 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = ` src="test-file-stub" /> </div> - <img + <div className={undefined} - draggable={false} - src="https://scratch.mit.edu/foo/bar/pony" - /> + > + <div + className={undefined} + > + <img + className={undefined} + draggable={false} + src="https://scratch.mit.edu/foo/bar/pony" + /> + </div> + </div> <div className={undefined} >