fix(ui): keep rendered markdown list markers visible (#9359)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The board UI renders agent/user-authored Markdown in task descriptions, comments, and other work-thread surfaces > - Those Markdown surfaces often live inside cards and containers that constrain overflow > - Ordered-list markers are painted outside the list content box, so too little inline padding can clip multi-digit markers at the left edge > - This pull request keeps the shared Markdown list gutter compact while giving ordered lists enough marker space for two- and three-digit counters > - The benefit is that long numbered lists in board-facing Markdown render correctly without widening unordered-list gutters or changing API, data, or editor behavior ## Linked Issues or Issue Description No public GitHub issue found. Bug description: - What happened: rendered Markdown ordered lists with multi-digit items could show clipped marker digits when the list was flush against an overflow-constrained container. - Expected behavior: ordered-list markers such as `10.` and `100.` should render fully in task descriptions and comments. - Steps to reproduce: render a `.paperclip-markdown` ordered list with at least 100 items inside a container that clips overflow and has no extra left gutter. - Paperclip version/commit: current `master` before this PR. - Deployment mode: board UI, deployment-mode independent. Related search result: - Refs #2049 because it also touches rendered Markdown list presentation, but it styles GFM task-list checkboxes and does not address ordered-list marker clipping. ## What Changed - Set the shared `.paperclip-markdown` list padding to a compact `1.5rem` baseline for bullets and lists. - Added an ordered-list-only `2.5rem` padding override so outside-positioned multi-digit ordered-list markers have enough inline-start room. - Added a focused stylesheet regression test that verifies unordered-list gutters stay compact while ordered lists keep the larger marker gutter. - Restored the exact maintainer-skill marker phrase expected by the existing server skill utility contract test, fixing an unrelated latest-head CI failure from current `master`. ## Verification - `pnpm --filter @paperclipai/ui exec vitest run src/components/MarkdownListStyles.test.ts` - `pnpm check:token-gates` - `pnpm --filter @paperclipai/ui build` - `pnpm exec vitest run server/src/__tests__/paperclip-skill-utils.test.ts` ## Risks - Low risk: ordered lists in rendered Markdown get a larger left gutter; unordered lists keep a smaller shared gutter. - Low risk: the skill-doc marker change is text-only and matches the existing server test contract. - No database, API, migration, auth, adapter, or telemetry changes. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex, GPT-5 coding agent, tool-enabled software-engineering session. Context window size was not exposed by the runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
parent
36ec79c196
commit
b15115e05b
|
|
@ -8,6 +8,8 @@ description: >
|
|||
|
||||
# Create a new issue-thread interaction UI (Developer/maintainer skill)
|
||||
|
||||
Developer/maintainer skill. Do NOT install this on production Paperclip agents.
|
||||
|
||||
This skill walks a Paperclip contributor through introducing a new issue-thread
|
||||
interaction kind from shared contract to issue-detail wiring, helpers, and
|
||||
docs. It is intentionally a developer/maintainer skill: the audience is a
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import { readFileSync } from "node:fs";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const stylesheet = readFileSync(fileURLToPath(new URL("../index.css", import.meta.url)), "utf8");
|
||||
|
||||
function cssBlock(selector: string): string {
|
||||
const start = stylesheet.indexOf(`${selector} {`);
|
||||
expect(start, `Missing CSS selector: ${selector}`).toBeGreaterThanOrEqual(0);
|
||||
|
||||
const bodyStart = stylesheet.indexOf("{", start);
|
||||
const bodyEnd = stylesheet.indexOf("\n}", bodyStart);
|
||||
expect(bodyStart, `Missing CSS block start: ${selector}`).toBeGreaterThanOrEqual(0);
|
||||
expect(bodyEnd, `Missing CSS block end: ${selector}`).toBeGreaterThan(bodyStart);
|
||||
|
||||
return stylesheet.slice(bodyStart + 1, bodyEnd);
|
||||
}
|
||||
|
||||
function remPaddingLeft(selector: string): number {
|
||||
const padding = cssBlock(selector).match(/padding-left:\s*([0-9.]+)rem/);
|
||||
|
||||
expect(padding?.[1], `Expected ${selector} to use rem padding`).toBeDefined();
|
||||
return Number(padding?.[1]);
|
||||
}
|
||||
|
||||
describe("rendered markdown list styles", () => {
|
||||
it("keeps unordered-list gutters compact while giving ordered markers enough room", () => {
|
||||
expect(remPaddingLeft(".paperclip-markdown :where(ul, ol)")).toBeLessThan(2.5);
|
||||
expect(remPaddingLeft(".paperclip-markdown ol")).toBeGreaterThanOrEqual(2.5);
|
||||
});
|
||||
});
|
||||
|
|
@ -1128,7 +1128,7 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
|
|||
}
|
||||
|
||||
.paperclip-markdown :where(ul, ol) {
|
||||
padding-left: 1.15rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.paperclip-markdown ul {
|
||||
|
|
@ -1136,7 +1136,10 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
|
|||
}
|
||||
|
||||
.paperclip-markdown ol {
|
||||
/* Enough inline start room to hold outside markers without clipped digits
|
||||
when markdown lists sit flush against an overflow-constrained container. */
|
||||
list-style-type: decimal;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.paperclip-markdown li {
|
||||
|
|
|
|||
Loading…
Reference in New Issue