Render visible checkmark on checked task list checkboxes

Agent-Logs-Url: https://github.com/microsoft/vscode-pull-request-github/sessions/eea637d3-2de0-4c58-bd80-e2dbde889fdc

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/common/common.css

@@ -166,6 +166,32 @@ input[type='checkbox']:checked {
 	opacity: 1;
 }
 
+/*
+ * Task list items rendered from markdown (e.g. `- [x] done`) produce
+ * `<li class="task-list-item"><input type="checkbox" checked disabled> ...</li>`
+ * without a `.checkbox-wrapper`, so the wrapper-based checkmark above does
+ * not apply. Pseudo-elements cannot be placed on `<input>` elements, so we
+ * draw the checkmark on the parent `<li>` using `:has()`, positioned over
+ * the checkbox.
+ */
+.task-list-item {
+	position: relative;
+}
+
+.task-list-item:has(> input[type='checkbox']:checked)::before,
+.task-list-item:has(> p > input[type='checkbox']:checked)::before {
+	content: '';
+	position: absolute;
+	top: 5px;
+	left: 6px;
+	width: 5px;
+	height: 10px;
+	border: solid var(--vscode-checkbox-foreground);
+	border-width: 0 1px 1px 0;
+	transform: rotate(45deg);
+	pointer-events: none;
+}
+
 input[type='checkbox']:focus {
 	outline: 1px solid var(--vscode-focusBorder);
 	outline-offset: 1px;