From 91e07b6f8b41d3b87600841d2cca5445a88dc4f2 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 8 Mar 2026 11:48:39 -0400
Subject: [PATCH] anagrams: Make the "return word" a badge at the upper right
 of the word

This makes it much more clear what this icon is, (it was confusing
when it was inline next to the existing '+').
---
 anagrams/anagrams.css | 21 ++++++++++++++++++---
 anagrams/anagrams.jsx | 14 +++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 2999555..fb7f2da 100644
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -161,18 +161,33 @@
 
 /* Stolen word display in claim area */
 .claimed-word {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  margin-right: 0.5em;
   margin-bottom: 4px;
 }
 
-.claimed-word .separator {
+.claimed-word .remove-word-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  font-size: 11px;
+  background: #888;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.separator {
   font-size: 18px;
   font-weight: bold;
   color: #666;
-  margin: 0 2px;
+  margin: 0 4px;
 }
 
 /* Player word areas */
diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 84197bc..13e3fb3 100644
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -955,19 +955,19 @@ class Game extends React.Component {
 
         {claimed_words.length > 0 ? (
           <div>
-            {claimed_words.map(cw => (
+            {claimed_words.map((cw, i) => [
+              i > 0 ? <span key={"sep" + cw.word_id}
+                            className="separator">+</span> : null,
               <span key={cw.word_id} className="claimed-word">
-                {cw.word_obj.word.split("").map((ch, i) => (
-                  <Tile key={i} letter={ch} />
+                {cw.word_obj.word.split("").map((ch, j) => (
+                  <Tile key={j} letter={ch} />
                 ))}
-                <span className="separator">+</span>
-                <span style={{ cursor: "pointer", fontSize: "0.9em",
-                               color: "#888" }}
+                <span className="remove-word-btn"
                       onClick={() => this.return_word(cw.word_id)}>
                   &#x2715;
                 </span>
               </span>
-            ))}
+            ])}
           </div>
         ) : null}
 
-- 
2.45.2