Overflow palette swatches

frontend/src/App.svelte

@@ -301,10 +301,9 @@
     grid-template-rows: minmax(0, 1fr);
   }
   .left {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-rows: minmax(0, 1fr) auto;
-    align-items: stretch;
+    overflow: hidden;
-    justify-content: space-between;
   }
   .toolbar {
     display: flex;

frontend/src/components/ColorIndex.svelte

@@ -1,6 +1,6 @@
 <script lang='ts'>
   import { Button } from "carbon-components-svelte";
-  import { Add, ColorSwitch } from "carbon-icons-svelte";
+  import { AddLarge, ColorSwitch } from "carbon-icons-svelte";
   import { ReplaceSwatchUndoable, type LoadedFile, AddSwatchUndoable } from "../types/file";
   import { createEventDispatcher } from "svelte";
 
@@ -22,11 +22,13 @@
   function addSwatch() {
     file.push(new AddSwatchUndoable(red, green, blue, alpha))
     dispatch('refresh', {})
+    ;(document.activeElement as HTMLElement).blur()
   }
 
   function replaceSwatch() {
     file.push(new ReplaceSwatchUndoable(index, red, green, blue, alpha))
     dispatch('refresh', {})
+    ;(document.activeElement as HTMLElement).blur()
   }
 </script>
 
@@ -35,7 +37,7 @@
     <div class="label" style="color: rgb({255-red}, {255-green}, {255-blue})">{index}</div>
   </div>
   <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="replace swatch" tooltipPosition="top" icon={ColorSwitch} on:click={replaceSwatch}></Button>
-  <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="add swatch" tooltipPosition="top" icon={Add} on:click={addSwatch}></Button>
+  <Button kind="ghost" size="small" disabled={swatchExists} iconDescription="add swatch" tooltipPosition="top" icon={AddLarge} on:click={addSwatch}></Button>
 </main>
 
 <style>

frontend/src/sections/Palette.svelte

@@ -142,6 +142,7 @@
     background-color: var(--cds-background-selected);
     text-align: left;
     user-select: none;
+    overflow: auto;
   }
   .entry {
     position: relative;