force line wrap for chart controls

apps/color-buddy/src/content-modules/MainColumn.svelte

@@ -82,7 +82,11 @@
       : currentPal.colors.map((x) => cvdSim(selectedCVDType, x))}
   />
 
-  <div class="flex flex-wrap" id="scatterplot-controls">
+  <div
+    class="flex flex-wrap"
+    id="scatterplot-controls"
+    style={`max-width: ${scatterSize + 110}px;`}
+  >
     <button
       class={`${buttonStyle} pl-0`}
       on:click={() => configStore.setScatterplotMode("putting")}

apps/color-buddy/src/controls/AdjustOrder.svelte

@@ -6,11 +6,16 @@
   $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
   $: focused = $focusStore.focusedColors;
   $: buttonsActive = focused.length > 0;
+  $: style = buttonStyle
+    .split(" ")
+    .filter((x) => !x.startsWith("opacity-50"))
+    .join(" ");
 </script>
 
 <button
-  class="{buttonStyle} mr-2"
+  class="{style} mr-2"
   class:opacity-30={!buttonsActive}
+  class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
   on:click|stopPropagation|preventDefault={() => {
     // move every element to the left
@@ -32,8 +37,9 @@
   Move left
 </button>
 <button
-  class="{buttonStyle} mr-2"
+  class="{style} mr-2"
   class:opacity-30={!buttonsActive}
+  class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
   on:click|stopPropagation|preventDefault={() => {
     // move every element to the right

apps/color-buddy/src/controls/ModifySelection.svelte

@@ -38,7 +38,7 @@
       ...currentPal.colors.filter((_, idx) => focusedSet.has(idx)),
     ])}
 >
-  Duplicate
+  Clone
 </button>
 
 <style>