From 757b75ecdc4ae77c80f51c6cbed26f5768df15ef Mon Sep 17 00:00:00 2001
From: buckhalt <buckhalt@northwestern.edu>
Date: Wed, 22 Apr 2026 13:27:02 -0700
Subject: [PATCH 1/2] fix(categorical-bin): clip fill with clip-path to avoid
 Firefox bg leak

---
 .../Interfaces/CategoricalBin/components/CategoricalBinItem.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx b/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
index d15dbfa14..7a546eee5 100644
--- a/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
+++ b/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
@@ -184,6 +184,7 @@ const CategoricalBinItem = (props: CategoricalBinItemProps) => {
         flexBasis: `${flexBasis}px`,
         aspectRatio: '1 / 1',
         borderRadius: '50%',
+        clipPath: 'circle(50%)',
       }}
       onClick={(e) => {
         e.stopPropagation();

From 134dd717555a7ae8c1dabbf43735183b1c5a68f1 Mon Sep 17 00:00:00 2001
From: buckhalt <buckhalt@northwestern.edu>
Date: Wed, 22 Apr 2026 14:13:15 -0700
Subject: [PATCH 2/2] fix(categorical-bin): move clip path to inner wrapper so
 hover glow shows

---
 .../components/CategoricalBinItem.tsx         | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx b/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
index 7a546eee5..6a54ad4e5 100644
--- a/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
+++ b/lib/interviewer/Interfaces/CategoricalBin/components/CategoricalBinItem.tsx
@@ -160,16 +160,18 @@ const CategoricalBinItem = (props: CategoricalBinItemProps) => {
   }
 
   const circleClasses = cx(
-    'focusable flex min-w-0 cursor-pointer flex-col items-center justify-center overflow-hidden text-center outline-(--cat-color)',
-    'border-4 p-4',
-    'border-(--cat-color)',
-    catColor && 'bg-[oklch(from_var(--cat-color)_l_c_h/0.1)]',
-    !catColor && 'bg-surface',
+    'focusable flex min-w-0 cursor-pointer items-center justify-center text-center outline-(--cat-color)',
     isOver &&
       willAccept &&
       'scale-110 shadow-[0_0_24px_var(--cat-color)] ring-4 ring-(--cat-color)',
   );
 
+  const circleContentClasses = cx(
+    'flex size-full flex-col items-center justify-center border-4 border-(--cat-color) p-4 text-center',
+    catColor && 'bg-[oklch(from_var(--cat-color)_l_c_h/0.1)]',
+    !catColor && 'bg-surface',
+  );
+
   return (
     <motion.div
       ref={mergedRef}
@@ -184,7 +186,6 @@ const CategoricalBinItem = (props: CategoricalBinItemProps) => {
         flexBasis: `${flexBasis}px`,
         aspectRatio: '1 / 1',
         borderRadius: '50%',
-        clipPath: 'circle(50%)',
       }}
       onClick={(e) => {
         e.stopPropagation();
@@ -195,20 +196,25 @@ const CategoricalBinItem = (props: CategoricalBinItemProps) => {
       transition={springTransition}
       variants={binItemVariants}
     >
-      <Heading level="h4">
-        <RenderMarkdown>{label}</RenderMarkdown>
-      </Heading>
-      <AnimatePresence>
-        {nodes.length > 0 && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <BinSummary nodes={nodes} />
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <div
+        className={circleContentClasses}
+        style={{ borderRadius: '50%', clipPath: 'circle(50%)' }}
+      >
+        <Heading level="h4">
+          <RenderMarkdown>{label}</RenderMarkdown>
+        </Heading>
+        <AnimatePresence>
+          {nodes.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <BinSummary nodes={nodes} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </motion.div>
   );
 };