Jannik/PaperClipAI
1
0 Fork 0
mirror of https://github.com/paperclipai/paperclip.git synced 2026-10-23 09:07:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

PAP-2607: align inline mention chips on text baseline

Browse Source 
Inline-flex baseline behavior is browser-dependent, which made skill/agent/issue
chips in MarkdownBody and the MDXEditor hang below the surrounding text. Switch
to vertical-align: middle and drop the vertical padding so the pill sits
centered on the line with the prose around it.

Adds a skill-chip line to the MarkdownBody storybook fixture so this regresses
loudly next time.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
DottaandPaperclip committed 2026-04-28 08:19:22 -05:00
1 parent e3869bda4c
commit 6df68f5305
2 files changed
+11 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/src/index.css
+9 -8
View File
@@ -442,13 +442,13 @@
align-items: center;
gap: 0.25rem;
margin: 0 0.1rem;
padding: 0.05rem 0.45rem;
padding: 0 0.45rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.75rem;
line-height: 1.3;
line-height: 1.25;
text-decoration: none;
vertical-align: baseline;
vertical-align: middle;
white-space: nowrap;
user-select: none;
}
@@ -860,15 +860,16 @@ span.paperclip-project-mention-chip {
align-items: center;
gap: 0.25rem;
margin: 0 0.1rem;
padding: 0.05rem 0.45rem;
padding: 0 0.45rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.75rem;
line-height: 1.3;
line-height: 1.25;
text-decoration: none;
/* Align the pill relative to the surrounding text baseline instead of its
x-height midpoint so it sits on the text line rather than floating above. */
vertical-align: baseline;
/* Center the pill on the surrounding x-height so it sits on the text line
instead of hanging below it. inline-flex baseline alignment is unreliable
across browsers, so use vertical-align: middle for a predictable result. */
vertical-align: middle;
white-space: nowrap;
}
ui/storybook/stories/forms-editors.stories.tsx
+2
View File
@@ -92,6 +92,8 @@ Ship criteria for the board UI refresh:
- [x] Keep comments and task updates auditable
- [ ] Attach screenshots after QA
Tooling: lean on [/react-perf-optimizer](skill://skill-react-perf?s=react-perf-optimizer) and [/vercel-react-best-practices](skill://skill-vercel-react?s=vercel-react-best-practices) so we don't regress render performance on the page it's open to. Inline skill chips like [/release-changelog](skill://skill-release?s=release-changelog) must sit on the surrounding text line, not hang below it.
| Surface | Owner | State |
| --- | --- | --- |
| Issues | CodexCoder | In progress |