From 43fdd544dde5d963bb307e4651eb7765acba20ac Mon Sep 17 00:00:00 2001
From: Logan Rasmussen <logan.rasmussen@mx.com>
Date: Mon, 26 Jan 2026 15:37:54 -0700
Subject: [PATCH] fix: size and position of touch indicator and checkbox

---
 src/components/ExampleCheckbox.tsx                    | 5 +++--
 src/components/TouchIndicator.tsx                     | 4 ++--
 src/views/oauth/experiments/PredirectInstructions.tsx | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ExampleCheckbox.tsx b/src/components/ExampleCheckbox.tsx
index 1cacaf671a..8bf287841f 100644
--- a/src/components/ExampleCheckbox.tsx
+++ b/src/components/ExampleCheckbox.tsx
@@ -10,7 +10,7 @@ export const ExampleCheckbox: React.FC<
   }
 > = ({ id, showTouchIndicator, pseudoFocusColor }) => {
   const theme = useTheme()
-  const checkboxSize = '1em'
+  const checkboxSize = '15px'
 
   return (
     <div aria-hidden="true" style={{ position: 'relative' }}>
@@ -25,6 +25,7 @@ export const ExampleCheckbox: React.FC<
           marginTop: '8px',
           marginBottom: '8px',
           marginRight: '12px',
+          marginLeft: '4px',
           width: checkboxSize,
           height: checkboxSize,
         }}
@@ -32,7 +33,7 @@ export const ExampleCheckbox: React.FC<
         type="checkbox"
       />
       {/* Position the touch indicator to be centered over the checkbox */}
-      {showTouchIndicator && <TouchIndicator style={{ left: '-9px', top: '-4px' }} />}
+      {showTouchIndicator && <TouchIndicator style={{ left: '-8px', top: '-4px' }} />}
       {/* If we are showing the psuedo touch indicator, also show the pseudo-focus for the checkbox */}
       {showTouchIndicator && (
         <div
diff --git a/src/components/TouchIndicator.tsx b/src/components/TouchIndicator.tsx
index e58547c4a4..21dd32721d 100644
--- a/src/components/TouchIndicator.tsx
+++ b/src/components/TouchIndicator.tsx
@@ -12,8 +12,8 @@ export const TouchIndicator: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
 
   const styles: React.CSSProperties = {
     position: 'absolute',
-    height: '36px',
-    width: '36px',
+    height: '37px',
+    width: '37px',
     background: `radial-gradient(circle, ${hover} 0%, ${selected} 100%)`,
     stroke: theme.palette.divider,
     filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12))',
diff --git a/src/views/oauth/experiments/PredirectInstructions.tsx b/src/views/oauth/experiments/PredirectInstructions.tsx
index d5f82e0c9a..dd796a772b 100644
--- a/src/views/oauth/experiments/PredirectInstructions.tsx
+++ b/src/views/oauth/experiments/PredirectInstructions.tsx
@@ -127,8 +127,8 @@ function PredirectInstructions(
                 const isLastItem = index === checkboxItems.length - 1
 
                 return (
-                  <>
-                    <li key={item}>
+                  <React.Fragment key={item}>
+                    <li>
                       <ExampleCheckbox
                         id={item}
                         pseudoFocusColor={institutionColor}
@@ -139,8 +139,8 @@ function PredirectInstructions(
                       </Text>
                     </li>
 
-                    {!isLastItem && <Divider key={`divider-${index}`} />}
-                  </>
+                    {!isLastItem && <Divider />}
+                  </React.Fragment>
                 )
               })}
             </ul>