authorgravatar for 71498452+StiensWout@users.noreply.github.comWout Stiens <71498452+StiensWout@users.noreply.github.com> 2026-08-06 18:57:02+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-06 12:57:02-04:00
logaa16c180e5850ab94c022d3e41e18350c2117deb
tree6cb22e8f333f3d30d6fbe256cc5c47c15c83ede8
parent470d4eb993eccd7d33cc9ad6f282c684d6760ac8
signature Signed by PGP key B5690EEEBB952194

fix(web): align composer inline chips with prompt text (#5495)

2 files changed, 9 insertions(+), 5 deletions(-)

apps/web/src/components/ComposerPromptEditor.tsx+5-5
......@@ -72,8 +72,8 @@ import { cn, isMacPlatform } from "~/lib/utils";
7272import { basenameOfPath } from "~/pierre-icons";
7373import {
7474 COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
75 COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
7675 COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
76 COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME,
7777 SKILL_CHIP_ICON_SVG,
7878} from "./composerInlineChip";
7979import { FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
......@@ -188,7 +188,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {
188188
189189 override createDOM(): HTMLElement {
190190 const dom = document.createElement("span");
191 dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
191 dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
192192 return dom;
193193 }
194194
......@@ -256,7 +256,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
256256 className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
257257 dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
258258 />
259 <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{props.skillLabel}</span>
259 <span className={COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME}>{props.skillLabel}</span>
260260 </span>
261261 );
262262
......@@ -326,7 +326,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {
326326
327327 override createDOM(): HTMLElement {
328328 const dom = document.createElement("span");
329 dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
329 dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
330330 return dom;
331331 }
332332
......@@ -397,7 +397,7 @@ class ComposerTerminalContextNode extends DecoratorNode<React.ReactElement> {
397397
398398 override createDOM(): HTMLElement {
399399 const dom = document.createElement("span");
400 dom.className = "composer-inline-chip relative inline-flex align-middle leading-none";
400 dom.className = "composer-inline-chip relative inline-flex align-[-0.125em] leading-none";
401401 return dom;
402402 }
403403
apps/web/src/components/composerInlineChip.ts+4
......@@ -14,6 +14,10 @@ export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";
1414
1515export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME = `${CHAT_INLINE_CHIP_LABEL_CLASS_NAME} select-none`;
1616
17// The skill label is smaller than the surrounding prompt text; offset its
18// glyphs without moving the pill box or changing the editor's line height.
19export const COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME = `${COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME} relative top-[0.15em]`;
20
1721export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =
1822 "inline-flex max-w-full select-none items-center gap-[0.33em] rounded-[0.5em] border border-fuchsia-500/25 bg-fuchsia-500/12 px-[0.5em] py-[0.08em] font-medium text-[0.86em] leading-[1.1] text-fuchsia-700 align-middle dark:text-fuchsia-300";
1923