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";...@@ -72,8 +72,8 @@ import { cn, isMacPlatform } from "~/lib/utils";
72import { basenameOfPath } from "~/pierre-icons";72import { basenameOfPath } from "~/pierre-icons";
73import {73import {
74 COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,74 COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
75 COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
76 COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,75 COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME,
76 COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME,
77 SKILL_CHIP_ICON_SVG,77 SKILL_CHIP_ICON_SVG,
78} from "./composerInlineChip";78} from "./composerInlineChip";
79import { FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";79import { FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
...@@ -188,7 +188,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {...@@ -188,7 +188,7 @@ class ComposerMentionNode extends DecoratorNode<React.ReactElement> {
188188
189 override createDOM(): HTMLElement {189 override createDOM(): HTMLElement {
190 const dom = document.createElement("span");190 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";
192 return dom;192 return dom;
193 }193 }
194194
...@@ -256,7 +256,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s...@@ -256,7 +256,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
256 className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}256 className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
257 dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}257 dangerouslySetInnerHTML={{ __html: SKILL_CHIP_ICON_SVG }}
258 />258 />
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>
260 </span>260 </span>
261 );261 );
262262
...@@ -326,7 +326,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {...@@ -326,7 +326,7 @@ class ComposerSkillNode extends DecoratorNode<React.ReactElement> {
326326
327 override createDOM(): HTMLElement {327 override createDOM(): HTMLElement {
328 const dom = document.createElement("span");328 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";
330 return dom;330 return dom;
331 }331 }
332332
...@@ -397,7 +397,7 @@ class ComposerTerminalContextNode extends DecoratorNode<React.ReactElement> {...@@ -397,7 +397,7 @@ class ComposerTerminalContextNode extends DecoratorNode<React.ReactElement> {
397397
398 override createDOM(): HTMLElement {398 override createDOM(): HTMLElement {
399 const dom = document.createElement("span");399 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";
401 return dom;401 return dom;
402 }402 }
403403
apps/web/src/components/composerInlineChip.ts+4
...@@ -14,6 +14,10 @@ export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";...@@ -14,6 +14,10 @@ export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";
1414
15export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME = `${CHAT_INLINE_CHIP_LABEL_CLASS_NAME} select-none`;15export 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
17export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =21export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =
18 "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";22 "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