[OPIK-7435] [FE] Fix Google Translate removeChild crash on onboarding email step (#7562)

* [OPIK-7435] [FE] Fix Google Translate removeChild crash on onboarding email step

The mobile ConnectStep submit button renders a state-dependent label
(Email setup instructions -> Sending... -> Instructions sent!) as a bare text
sibling of the button icon. Under browser translation Google Translate wraps
that text node in a <font> element; submitting the email reconciles the button
(icon + label swap) against a re-parented node and throws
"NotFoundError: Failed to execute 'removeChild' on 'Node'". Wrap the label in a
<span> so React swaps a stable wrapper element instead of the bare text node;
the label stays fully translatable. See react/react#11538.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* [OPIK-7435] [FE] Add frontend rule: browser-translation-safe dynamic text

Document the Google Translate removeChild crash class in the opik-frontend
skill (Critical Gotchas) so new dynamic/animated text wraps interpolated
strings in an element instead of rendering bare text nodes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: awkoy

.agents/skills/opik-frontend/SKILL.md

@@ -52,6 +52,16 @@ const selectedEntity = useEntityStore(state => state.selectedEntity);
 const { selectedEntity, filters } = useEntityStore();
 ```
 
+### Browser Translation Safety (Google Translate)
+Many users auto-translate the page; the translator wraps text nodes in `<font>` elements, so React throws `NotFoundError: removeChild` when it reconciles a **bare dynamic text node** it re-parented. Wrap dynamic/conditional strings in their own element instead of rendering bare text.
+```typescript
+// ❌ bare dynamic text → crash under translation
+<button>{icon}{label}</button>
+// ✅ wrap it → React swaps a stable element, stays translatable
+<button>{icon}<span>{label}</span></button>
+```
+For timer-driven text (typewriter/counter), also avoid per-tick `setState` — write into a ref'd node's `textContent` (React never reconciles it), or mark a decorative node `translate="no"`. Ref: [facebook/react#11538](https://github.com/facebook/react/issues/11538) (OPIK-7428, OPIK-7435).
+
 ## Layer Architecture
 
 ### Shared layers (used by all versions)

apps/opik-frontend/src/v2/pages/GetStartedPage/MobileOnboarding/ConnectStep.tsx

@@ -161,11 +161,20 @@ const ConnectStep: React.FC<ConnectStepProps> = ({ userEmail = "" }) => {
               ) : (
                 <Mail className="size-3.5" />
               )}
-              {isPending
-                ? "Sending..."
-                : emailSent
-                  ? "Instructions sent!"
-                  : "Email setup instructions"}
+              {/* Wrap the state-dependent label in a <span> so React swaps a
+                  stable wrapper element instead of a bare text node. Under
+                  browser translation Google Translate re-parents text nodes
+                  into <font> elements; reconciling this label (icon + text swap
+                  on submit) against a re-parented bare text node throws
+                  "NotFoundError: removeChild". The wrapper keeps the label fully
+                  translatable (unlike translate="no"). See facebook/react#11538. */}
+              <span>
+                {isPending
+                  ? "Sending..."
+                  : emailSent
+                    ? "Instructions sent!"
+                    : "Email setup instructions"}
+              </span>
             </Button>
           </form>