Make sprite selector item absolutely position images to prevent layouts

On some projects, the sprite image changes frequently, which can cause global layouts and paints if we arent careful. Use the same absolute positioning strategy from the sprite library animations to contain layouts to the sprite image itself

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;
 }
 

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 {

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;

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>