Commit 70cd258d8aac43ea57494527b00bf36de3efa6c0 | the-knife

Co-authored-by: shivam <91240327+shivamhwp@users.noreply.github.com>

3 files changed, 13 insertions(+), 16 deletions(-)

apps/web/src/components/ChatMarkdown.test.tsx+5-5

...	...	@@ -360,13 +360,13 @@ describe("orderedListGutterStyle", () => {
360	360	expect(orderedListGutterStyle(9, undefined)).toBeUndefined();
361	361	});
362	362
363		it("leaves the default gutter alone for two-digit lists", () => {
364		expect(orderedListGutterStyle(99, undefined)).toBeUndefined();
	363	it("widens the gutter for two-digit lists", () => {
	364	expect(orderedListGutterStyle(99, undefined)).toEqual({ "--list-gutter": "3ch" });
365	365	});
366	366
367		it("leaves the default gutter alone for a two-digit list that starts above 1", () => {
	367	it("widens the gutter for a two-digit list that starts above 1", () => {
368	368	// start=50 + 49 items => last marker is "98", still two digits.
369		expect(orderedListGutterStyle(49, 50)).toBeUndefined();
	369	expect(orderedListGutterStyle(49, 50)).toEqual({ "--list-gutter": "3ch" });
370	370	});
371	371
372	372	it("widens the gutter once the last marker reaches three digits", () => {
...	...	@@ -387,7 +387,7 @@ describe("orderedListGutterStyle", () => {
387	387	it("uses the widest marker and includes a negative start's minus sign", () => {
388	388	expect(orderedListGutterStyle(1001, -1000)).toEqual({ "--list-gutter": "6ch" });
389	389	expect(orderedListGutterStyle(3, -15)).toEqual({ "--list-gutter": "4ch" });
390		expect(orderedListGutterStyle(3, -5)).toBeUndefined();
	390	expect(orderedListGutterStyle(3, -5)).toEqual({ "--list-gutter": "3ch" });
391	391	});
392	392
393	393	it("treats a missing/zero item count as a single item", () => {

apps/web/src/components/ChatMarkdown.tsx+5-8

...	...	@@ -328,13 +328,10 @@ function findTaskListMarkerOffset(markdown: string, listItemStart: number): numb
328	328	}
329	329
330	330	/**
331		* The default `1.25rem` marker gutter (`.chat-markdown ol`) fits markers up to
332		* two characters wide. Once a marker reaches three characters (item 100+),
333		* `list-style-position: outside` paints it wider than that gutter and clips
334		* the leading character against the item's own overflow. Rather than widening
335		* the gutter for every list, only lists whose widest marker is 3+ characters
336		* get a wider `--list-gutter`. The width includes a negative marker's minus
337		* sign.
	331	* The default `1.25rem` marker gutter (`.chat-markdown ol`) fits one-character
	332	* markers. Wider markers can extend past it and get clipped by a collapsed
	333	* message's overflow. Widen the gutter to fit the widest marker, including a
	334	* negative marker's minus sign.
338	335	*/
339	336	export function orderedListGutterStyle(
340	337	itemCount: number,
...	...	@@ -344,7 +341,7 @@ export function orderedListGutterStyle(
344	341	const firstNumber = Number.isNaN(parsedStart) ? 1 : parsedStart;
345	342	const lastNumber = firstNumber + Math.max(itemCount - 1, 0);
346	343	const markerWidth = Math.max(String(firstNumber).length, String(lastNumber).length);
347		if (markerWidth <= 2) return undefined;
	344	if (markerWidth <= 1) return undefined;
348	345	return { "--list-gutter": `${markerWidth + 1}ch` };
349	346	}
350	347

apps/web/src/index.css+3-3

...	...	@@ -1643,8 +1643,8 @@ code {
1643	1643	}
1644	1644
1645	1645	.chat-markdown ul {
1646		/* Reset for nested uls under a widened ol — --list-gutter is an inherited
1647		custom property, so without this a task-list under a 3+ digit ordered
	1646	/* Reset for nested uls under a widened ol. --list-gutter is an inherited
	1647	custom property, so without this a task-list under a multi-digit ordered
1648	1648	list would inherit the outer gutter instead of its own default. */
1649	1649	--list-gutter: 1.25rem;
1650	1650	padding-left: 1.25rem;
...	...	@@ -1653,7 +1653,7 @@ code {
1653	1653
1654	1654	/* --list-gutter defaults to the same 1.25rem as .chat-markdown ul, but
1655	1655	ChatMarkdown's `ol` renderer widens it (via inline style) for lists whose
1656		widest marker is 3+ characters, so item 100+ isn't clipped by list-style-position:
	1656	widest marker has multiple characters so it isn't clipped by list-style-position:
1657	1657	outside painting the marker past the padding box. Reset it here too so a
1658	1658	nested ol without its own widened marker doesn't inherit the outer one. */
1659	1659	.chat-markdown ol {