+ {/* Panel — stop click propagation so clicks inside don't close it */}
+
e.stopPropagation()}
+ style={{
+ position: 'absolute', top: 0, right: 0, bottom: 0,
+ width: QA_PANEL_WIDTH,
+ background: 'var(--surface)',
+ borderLeft: '1px solid var(--border)',
+ boxShadow: '-6px 0 24px rgba(0,0,0,.10)',
+ display: 'flex', flexDirection: 'column',
+ borderRadius: '0 12px 12px 0',
+ overflow: 'hidden',
+ }}
+ >
+ {/* Panel header */}
+
+
+
+
+ {domain.domain_name}
+
+
+ {domain.user_email}
+
+
+
+
+
+ {data && (
+
+ {data.row_count} Q&A pair{data.row_count !== 1 ? 's' : ''}
+
+ )}
+
+ {data && data.row_count > 5 && (
+
+
+
setSearch(e.target.value)}
+ style={{
+ width: '100%', padding: '6px 10px 6px 28px', fontSize: 12.5,
+ border: '1px solid var(--border)', borderRadius: 6,
+ background: 'var(--surface-2)', color: 'var(--text)',
+ outline: 'none', boxSizing: 'border-box',
+ }}
+ />
+
+ )}
+
+
+ {/* Pairs list — block layout so cards grow to their natural height */}
+
+ {isLoading && (
+
+ Loading…
+
+ )}
+ {isError && (
+
+ Failed to load Q&A pairs.
+
+ )}
+ {data && data.rows.length === 0 && (
+
+ No Q&A pairs yet.
+
+ )}
+ {search && filtered.length === 0 && data && data.rows.length > 0 && (
+
+ No results for “{search}”
+
+ )}
+ {filtered.map((row, i) => (
+
+ {/* Question */}
+
+
+ Q {i + 1}
+
+
+ {row.question}
+
+
+ {/* Answer */}
+
+
+ A
+
+
+ {row.answer}
+
+
+
+ ))}
+ {/* bottom breathing room */}
+ {filtered.length > 0 &&
}
+
+