From f39b4f7fdcff28c64ac4aab0502d1879bafc73e6 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 01:23:41 -0500
Subject: [PATCH] fix: replace hint paragraphs with InfoTip tooltips in
 NodeFormResolution

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/tree-editor/NodeFormResolution.tsx   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx
index e24e7df9..2e1503e1 100644
--- a/frontend/src/components/tree-editor/NodeFormResolution.tsx
+++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { DynamicArrayField } from './DynamicArrayField'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
+import { InfoTip } from '@/components/common/InfoTip'
 import type { TreeStructure } from '@/types'
 import { cn } from '@/lib/utils'
 
@@ -70,8 +71,9 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="block text-sm font-medium text-foreground">
+          <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
             Description
+            <InfoTip text="Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`" />
           </label>
           {node.description && (
             <button
@@ -83,9 +85,6 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
             </button>
           )}
         </div>
-        <p className="mb-1 text-xs text-muted-foreground">
-          Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`
-        </p>
         {showPreview && node.description ? (
           <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
@@ -112,12 +111,10 @@ Document what was done and the outcome.
 
       {/* Resolution Steps */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
           Resolution Steps
+          <InfoTip text="Step-by-step instructions for resolving the issue" />
         </label>
-        <p className="mb-2 text-xs text-muted-foreground">
-          Step-by-step instructions for resolving the issue
-        </p>
         <DynamicArrayField
           items={node.resolution_steps || []}
           onAdd={handleAddStep}