fix(client): scope PluginTooltip link styles to stop a global CSS leak

styles.module.css used a bare `a` element selector, which CSS Modules does NOT hash — it leaked a global `a { color: white }` app-wide (and into the docs site), whiting out unstyled links in light contexts. Scope it to `.tooltipHtml a` and apply the class on the injected-HTML container.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Kinyoo
2026-07-21 10:49:59 +08:00
parent 8a4ad93eb9
commit 79789f807b
2 changed files with 7 additions and 3 deletions
@@ -1,5 +1,5 @@
import { HoverCardPortal, HoverCardContent } from '~/components/ui';
import './styles.module.css';
import styles from './styles.module.css';
type TPluginTooltipProps = {
content: string;
@@ -12,7 +12,7 @@ function PluginTooltip({ content, position }: TPluginTooltipProps) {
<HoverCardContent side={position} className="w-80 ">
<div className="space-y-2">
<div className="text-sm text-gray-600 dark:text-gray-300">
<div dangerouslySetInnerHTML={{ __html: content }} />
<div className={styles.tooltipHtml} dangerouslySetInnerHTML={{ __html: content }} />
</div>
</div>
</HoverCardContent>
@@ -1,4 +1,8 @@
a {
/* Scoped to the tooltip's injected HTML. The old bare `a` element selector is
NOT hashed by CSS modules — it leaked a global `a { color: white }` into the
whole app (and the docs site), turning unstyled links white-on-white in
light contexts. */
.tooltipHtml a {
text-decoration: underline;
color: white;
}