Revert "Attempt at using inline select"

This reverts commit 1435a292e25e960b84be51d8b0a2b6c0965982ca.

frontend/public/index.css

@@ -121,13 +121,13 @@ details > summary {
   color: red;
 }
 
-.word-chip {
+span.word-chip {
   background-color: #222222;
   color: white;
   padding: 2px;
 }
 
-.word-chip.flagged {
+span.word-chip.flagged {
   background-color: #dd1111;
 }
 

frontend/src/components/WordChip.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState, useEffect, useRef } from "react"
 
 export const WordChip = ({
   word,
@@ -13,39 +13,63 @@ export const WordChip = ({
   replacements: string[],
   onReplace: (newWord: string) => void
 }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const dropdownRef = useRef<HTMLSelectElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleClick = () => {
+    if (logprob < threshold && replacements.length > 0) {
+      setIsExpanded(true);
+    }
+  }
 
   const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
     console.log("handleReplacement", event.target.value)
     const newWord = event.target.value
     onReplace(newWord)
-  }
-
-  const className = `word-chip ${logprob < threshold ? "flagged" : ""}`
-
-  if (replacements.length === 0) {
-    return <span className={className}>{word}</span>
+    setIsExpanded(false);
   }
 
   return (
-    <select
-      className={className}
-      onChange={handleReplacement}
-      style={{
-        appearance: 'none',
-        border: 'none',
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        color: 'inherit',
-        background: 'inherit',
-        backgroundColor: 'red',
-        padding: 0,
-        cursor: 'pointer'
-      }}
+    <span
+      title={logprob.toFixed(2)}
+      className={`word-chip ${logprob < threshold ? "flagged" : ""}`}
+      style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
+      onClick={handleClick}
     >
-      <option key="original" hidden>{word}</option>
-      {replacements.map((r, i) => (
-        <option key={i} value={r}>{r}</option>
-      ))}
-    </select>
+      {word}
+      {isExpanded && (
+        <select
+          ref={dropdownRef}
+          onChange={handleReplacement}
+          value={word}
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1000,
+            overflowY: "auto"
+          }}
+          size={replacements.length + 1}
+        >
+          <option key="original" hidden>{word}</option>
+          {replacements.map((r, i) => (
+            <option key={i} value={r}>{r}</option>
+          ))}
+        </select>
+      )}
+    </span>
   )
 }