docs(09-05): add tooltip fix plan and debug session

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 11:11:59 +02:00
parent c848f7dd75
commit 29aa6b9e2f
1 changed files with 87 additions and 0 deletions
@@ -0,0 +1,87 @@
+---
+status: diagnosed
+trigger: "Tooltip info buttons on Remote Config wizard step: hovering doesn't show anything, icon placement is wrong (above field instead of beside helpText)"
+created: 2026-04-01T00:00:00Z
+updated: 2026-04-01T00:00:00Z
+---
+
+## Current Focus
+
+hypothesis: Two distinct root causes — onClick-only toggle (no hover), and icon placed above TextFieldMD3 instead of beside helpText
+test: Code review of FieldRenderer.tsx lines 83-109 and TextFieldMD3.tsx lines 65-67
+expecting: Confirm both issues from source
+next_action: Report diagnosis
+
+## Symptoms
+
+expected: (1) Hovering tooltip button shows tooltip text. (2) Icon is beside the helpText under the field.
+actual: (1) Nothing happens on hover — only click toggles. (2) Icon is above the TextFieldMD3 component.
+errors: none
+reproduction: Open Remote Config wizard, hover over any info button
+started: Since phase-09 tooltip implementation
+
+## Eliminated
+
+(none needed — root causes identified on first pass)
+
+## Evidence
+
+- timestamp: 2026-04-01T00:00:00Z
+  checked: FieldRenderer.tsx lines 83-109 (text input default branch)
+  found: |
+    The tooltip button at lines 85-94 uses onClick={() => setShowTooltip(v => !v)} only.
+    There are NO onMouseEnter/onMouseLeave handlers, and no CSS hover-triggered tooltip.
+    The tooltip text (lines 95-99) is only rendered when showTooltip state is true,
+    which only changes on click — never on hover.
+  implication: Root cause of Issue 1 — tooltip requires click, not hover
+
+- timestamp: 2026-04-01T00:00:00Z
+  checked: FieldRenderer.tsx lines 83-109 (DOM structure of text input branch)
+  found: |
+    The DOM order is:
+      <div flex-col>
+        {tooltipText && <button>icon</button>}     ← lines 85-94: icon ABOVE field
+        {tooltipText && showTooltip && <p>text</p>} ← lines 95-99: tooltip text ABOVE field
+        <TextFieldMD3 helpText={field.helpText} />  ← lines 100-107: field with helpText inside
+      </div>
+    The icon button is a sibling rendered BEFORE TextFieldMD3, placing it above the field.
+    Meanwhile, helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx lines 65-67),
+    so the icon cannot be "beside the helpText" from its current position.
+  implication: Root cause of Issue 2 — icon is structurally above the field, not beside helpText
+
+- timestamp: 2026-04-01T00:00:00Z
+  checked: TextFieldMD3.tsx lines 65-67
+  found: |
+    helpText is rendered inside TextFieldMD3:
+      {helpText && !error && (
+        <p className="text-xs text-on-surface-container/70">{helpText}</p>
+      )}
+    This is encapsulated inside the component — FieldRenderer has no way to inject
+    an icon beside it without either: (a) passing the icon as a prop, or (b) moving
+    helpText rendering out of TextFieldMD3.
+  implication: Fix requires changing TextFieldMD3 interface or moving helpText rendering
+
+## Resolution
+
+root_cause: |
+  ISSUE 1 — Tooltip doesn't show on hover:
+    File: src/components/ui/FieldRenderer.tsx, lines 85-94
+    The tooltip button only has an onClick handler that toggles showTooltip state.
+    There are no onMouseEnter/onMouseLeave handlers and no CSS :hover mechanism.
+    The tooltip content (lines 95-99) is conditionally rendered only when showTooltip === true,
+    which never becomes true from hovering.
+
+  ISSUE 2 — Icon placed above field instead of beside helpText:
+    File: src/components/ui/FieldRenderer.tsx, lines 83-109
+    The icon button is rendered as a sibling BEFORE <TextFieldMD3>, placing it visually
+    above the text field. The helpText is rendered INSIDE TextFieldMD3 (TextFieldMD3.tsx
+    line 65-67), making it impossible for the icon in FieldRenderer to sit beside it.
+    To place the icon beside helpText, either:
+    (a) TextFieldMD3 needs a new prop (e.g., helpTextSuffix or helpTextIcon) to render
+        content inline with the helpText paragraph, or
+    (b) helpText rendering moves out of TextFieldMD3 back into FieldRenderer, where the
+        icon and helpText can be placed in a flex-row together.
+
+fix: (not applied — diagnosis only)
+verification: (not applied — diagnosis only)
+files_changed: []