From 01408a28833d2158d849b55e50a1281a8dfeef82 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Thu, 15 Feb 2024 20:23:49 -0800
Subject: [PATCH] fix a couple things from the ipad

---
 src/components/ColorChannelPicker.svelte |   2 +-
 src/content-modules/Controls.svelte      |   4 +-
 src/controls/Rotate.svelte               | 118 +++++++++++------------
 3 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte
index 88f1a2a1..0a88adeb 100644
--- a/src/components/ColorChannelPicker.svelte
+++ b/src/components/ColorChannelPicker.svelte
@@ -208,7 +208,7 @@
     height: 2.2em;
     border-radius: 0.3em;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-    min-width: 285px;
+    min-width: 265px;
   }
 
   .color-slider::-webkit-slider-thumb {
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 16073a1e..2df65e2c 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -35,7 +35,9 @@
 
   <DistributePoints />
   <AlignSelection />
-  <Rotate />
+  {#if focusedColors.length > 0 && colorSpace !== "hsl" && colorSpace !== "hsv" && colorSpace !== "lch"}
+    <Rotate />
+  {/if}
 
   <InterpolatePoints />
 </div>
diff --git a/src/controls/Rotate.svelte b/src/controls/Rotate.svelte
index eabccf4f..2fd5015f 100644
--- a/src/controls/Rotate.svelte
+++ b/src/controls/Rotate.svelte
@@ -106,74 +106,72 @@
   }
 </script>
 
-{#if focusedColors.length > 0 && colorSpace !== "hsl" && colorSpace !== "hsv" && colorSpace !== "lch"}
-  <div class="w-full border-t-2 border-black my-2"></div>
-  <div class="flex justify-between w-full">
-    <div class="font-bold">Rotate</div>
-    <Tooltip>
-      <button slot="target" let:toggle on:click={toggle}>⚙</button>
-      <div slot="content">
-        <div class="flex flex-col">
-          <div>Around which point?</div>
-          <div class="flex flex-wrap">
+<div class="w-full border-t-2 border-black my-2"></div>
+<div class="flex justify-between w-full">
+  <div class="font-bold">Rotate</div>
+  <Tooltip>
+    <button slot="target" let:toggle on:click={toggle}>⚙</button>
+    <div slot="content">
+      <div class="flex flex-col">
+        <div>Around which point?</div>
+        <div class="flex flex-wrap">
+          <button
+            on:click={() => setRotatePoint("avg")}
+            class={`${buttonStyle} mb-2 ${
+              rotationPoint === "avg" ? buttonStyleSelected : ""
+            }`}
+          >
+            An average of the selected colors
+          </button>
+          {#if zeroRotationSpaces.has(colorSpace)}
             <button
-              on:click={() => setRotatePoint("avg")}
+              on:click={() => setRotatePoint("zero")}
               class={`${buttonStyle} mb-2 ${
-                rotationPoint === "avg" ? buttonStyleSelected : ""
+                rotationPoint === "zero" ? buttonStyleSelected : ""
               }`}
             >
-              An average of the selected colors
+              Around zero
             </button>
-            {#if zeroRotationSpaces.has(colorSpace)}
-              <button
-                on:click={() => setRotatePoint("zero")}
-                class={`${buttonStyle} mb-2 ${
-                  rotationPoint === "zero" ? buttonStyleSelected : ""
-                }`}
-              >
-                Around zero
-              </button>
-            {/if}
+          {/if}
 
-            {#each focusedColors as colorIdx}
-              <button
-                class={`${buttonStyle} flex justify-center items-center ${
-                  rotationPoint === colorIdx ? buttonStyleSelected : ""
-                }`}
-                on:click={() => setRotatePoint(colorIdx)}
-              >
-                {colors[colorIdx].toHex()}
-                <span
-                  style={`background-color: ${colors[colorIdx].toHex()}`}
-                  class="rounded-full w-3 h-3 ml-2"
-                ></span>
-              </button>
+          {#each focusedColors as colorIdx}
+            <button
+              class={`${buttonStyle} flex justify-center items-center ${
+                rotationPoint === colorIdx ? buttonStyleSelected : ""
+              }`}
+              on:click={() => setRotatePoint(colorIdx)}
+            >
+              {colors[colorIdx].toHex()}
+              <span
+                style={`background-color: ${colors[colorIdx].toHex()}`}
+                class="rounded-full w-3 h-3 ml-2"
+              ></span>
+            </button>
+          {/each}
+        </div>
+        <div class="flex">
+          Rotate about the
+          <select bind:value={axis} class="mx-1">
+            {#each ["x", "y", "z"] as axis}
+              <option value={axis}>{axis}</option>
             {/each}
-          </div>
-          <div class="flex">
-            Rotate about the
-            <select bind:value={axis} class="mx-1">
-              {#each ["x", "y", "z"] as axis}
-                <option value={axis}>{axis}</option>
-              {/each}
-            </select>
-            Axis
-          </div>
+          </select>
+          Axis
         </div>
       </div>
-    </Tooltip>
-  </div>
-  <div class="flex flex-col">
-    <div class="w-full flex justify-between">
-      <input min={0} max={360} step={1} type="range" bind:value={angle} />
-      <input
-        min={0}
-        max={360}
-        step={1}
-        type="number"
-        bind:value={angle}
-        class="w-16 text-sm"
-      />
     </div>
+  </Tooltip>
+</div>
+<div class="flex flex-col">
+  <div class="w-full flex justify-between">
+    <input min={0} max={360} step={1} type="range" bind:value={angle} />
+    <input
+      min={0}
+      max={360}
+      step={1}
+      type="number"
+      bind:value={angle}
+      class="w-16 text-sm"
+    />
   </div>
-{/if}
+</div>