fix(editor): improve rich markdown table readability (#827)

* fix(editor): improve rich markdown table readability

Show borders and subtle striping for rich markdown tables so cell boundaries stay legible in the formatted editor.

* fix(editor): keep rich table headers sentence case

Keep the new table styling readable without forcing header text to uppercase.

* style(rich-md): fix table striping against Tiptap tbody-only DOM

Switch zebra striping to nth-child(odd) so the shaded row doesn't sit
directly under the header, and drop the compounding th font-size.

---------

Co-authored-by: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
This commit is contained in:
Andreas Parusel 2026-04-19 18:22:19 +02:00 committed by GitHub
parent 897ba4a3dc
commit b8b773e892
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -280,6 +280,34 @@
background: color-mix(in srgb, var(--foreground) 2%, transparent);
}
.rich-markdown-editor table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
font-size: 0.95em;
}
.rich-markdown-editor th,
.rich-markdown-editor td {
padding: 8px 14px;
border: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.rich-markdown-editor th {
font-weight: 600;
background: color-mix(in srgb, var(--foreground) 4%, transparent);
}
/* Why: Tiptap tables render as <tbody> only with the first <tr> containing
<th> cells. Striping odd rows (1, 3, 5) skips the header row which has
no <td> and starts alternation from the second data row, avoiding a
shaded band directly adjacent to the header. */
.rich-markdown-editor tr:nth-child(odd) td {
background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}
.rich-markdown-editor code {
padding: 0.2em 0.4em;
border-radius: 5px;