From b15115e05bdf7fb21cf44d8f2f9dd44f5fb7555e Mon Sep 17 00:00:00 2001
From: Dotta <34892728+cryppadotta@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:12:25 -0500
Subject: [PATCH] fix(ui): keep rendered markdown list markers visible (#9359)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../create-issue-interaction-ui/SKILL.md      |  2 ++
 ui/src/components/MarkdownListStyles.test.ts  | 31 +++++++++++++++++++
 ui/src/index.css                              |  5 ++-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/MarkdownListStyles.test.ts

diff --git a/.agents/skills/create-issue-interaction-ui/SKILL.md b/.agents/skills/create-issue-interaction-ui/SKILL.md
index 59e22795ba..9cebfacc95 100644
--- a/.agents/skills/create-issue-interaction-ui/SKILL.md
+++ b/.agents/skills/create-issue-interaction-ui/SKILL.md
@@ -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
diff --git a/ui/src/components/MarkdownListStyles.test.ts b/ui/src/components/MarkdownListStyles.test.ts
new file mode 100644
index 0000000000..5087569b6a
--- /dev/null
+++ b/ui/src/components/MarkdownListStyles.test.ts
@@ -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);
+  });
+});
diff --git a/ui/src/index.css b/ui/src/index.css
index 43430a2fda..ce4c18ba7a 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -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 {