From c2530ba2dd85c90c616848436210a4f5a3c2502f Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Fri, 27 Sep 2024 17:05:33 -0600
Subject: [PATCH] fiddle with naming stuff

---
 .../src/components/ContentEditable.svelte        | 16 ++++------------
 .../src/content-modules/LeftPanel.svelte         |  7 +++++--
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/color-buddy/src/components/ContentEditable.svelte b/apps/color-buddy/src/components/ContentEditable.svelte
index 56bb8641..77a09899 100644
--- a/apps/color-buddy/src/components/ContentEditable.svelte
+++ b/apps/color-buddy/src/components/ContentEditable.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   export let onChange: (str: string) => void;
   export let value: string;
-  export let limitWidth: boolean = false;
   export let useEditButton: boolean = false;
   export let onClick: () => void = () => {};
+  export let displayValue: string = value;
 
   let focused = false;
 </script>
@@ -12,6 +12,7 @@
   <input
     type="text"
     bind:value
+    class="border-2 border-gray-300 w-fit"
     on:blur={() => {
       onChange(value);
       focused = false;
@@ -32,19 +33,10 @@
         focused = true;
       }
     }}
-    class:wrap-title={limitWidth}
   >
-    {value}
+    {displayValue}
   </button>
 {/if}
-{#if useEditButton}
+{#if useEditButton && !focused}
   <button on:click={() => (focused = true)}>✎</button>
 {/if}
-
-<style>
-  .wrap-title {
-    max-width: 205px;
-    white-space: break-spaces;
-    line-break: anywhere;
-  }
-</style>
diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
index 6eee0867..7679e27d 100644
--- a/apps/color-buddy/src/content-modules/LeftPanel.svelte
+++ b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -84,6 +84,9 @@
       <ContentEditable
         onChange={(x) => colorStore.setCurrentPalName(x)}
         value={currentPal.name}
+        displayValue={`${currentPal.name.slice(0, 20)}${
+          currentPal.name.length > 20 ? "..." : ""
+        }`}
         useEditButton={true}
       />
     </div>
@@ -125,7 +128,7 @@
           </button>
           <div class="flex justify-between w-full px-2 items-center z-10">
             <span class="flex flex-col items-start">
-              <span>
+              <span class="flex max-w-5">
                 <ContentEditable
                   onChange={(x) => {
                     const updatedColors = [...colors];
@@ -133,7 +136,7 @@
                     colorStore.setCurrentPalColors(updatedColors);
                   }}
                   value={color.toHex()}
-                  useEditButton={false}
+                  useEditButton={true}
                 />
               </span>
               {#if colorNames[idx]}<span class="text-right text-xs">