fix palette height on smaller palettes

src/components/Palette.jsx

@@ -25,7 +25,7 @@ const Palette = ({
       display: (paletteOpen) ? 'flex' : 'none',
       height: ((colors.length - clrIgnore) > 30 || compactPalette)
         ? Math.ceil((colors.length - clrIgnore) / 5 * 28)
-        : undefined,
+        : ((colors.length - clrIgnore) * 24),
     }}
   >
     {colors.slice(2).map((color, index) => (
@@ -33,7 +33,10 @@ const Palette = ({
         style={{
           backgroundColor: color,
         }}
-        key={index + 2}
+        role="button"
+        tabIndex={0}
+        aria-label={`color ${index + 2}`}
+        key={color}
         className={selectedColor === (index + clrIgnore)
           ? 'selected'
           : 'unselected'}

src/components/base.tcss

@@ -354,7 +354,6 @@ kbd {
 }
 
 :global(.widpalette) {
-    height: 720px; 
     width: 24px;
     flex-direction: column;
 }

src/reducers/gui.js

@@ -114,6 +114,13 @@ export default function gui(
       };
     }
 
+    case 'SELECT_CANVAS': {
+      return {
+        ...state,
+        selectedColor: 2,
+      };
+    }
+
     case 'SET_NOTIFICATION': {
       return {
         ...state,