a.tag-link renders poorly in tables

[MasssiveJuice08]

Describe the bug

Tags in tables render poorly:

1. With large tables, they get broken up so they become difficult to read
2. The padding (and by extension the background-color) gets pushed onto a new line

Issue 1

This can be fixed by changing overflow-wrap to "normal" and hyphens to "none" for a.tag-link.internal.alias inside td.

• Overflow-wrap: Having this set to "anywhere" breaks up the tags excessively. As a contiguous element with a highlighted background, they look best on a single line, or only breaking onto a new line if the tag contains a hyphen already (e.g., #cool-tag)
• Hyphens: Tags often contain hyphens when stringing together multiple words in a tag, so setting hyphens to auto is unnecessary and over-hyphenates them

Issue 2

A problem persists when altering the overflow-wrap and hyphens to the above settings: the background-color of a tag element can break onto a new line even when the text itself does not:

I have been unable to find a fix for this. It appears tied to the padding of a and a.tag-link elements (0 0.1rem and 0.2rem 0.4rem respectively). Removing this padding prevents the background-color breaking onto a new-line, but it also negatively impacts the visual style of the tag links.

The only fix I have found is to set whitespace to either "nowrap" or "pre". However, this prevents the tags from breaking onto a new line where appropriate, such as if the tag name contains a hyphen already (e.g., #cool-tag)

To Reproduce

Steps to reproduce the behavior:

1. Create a large table with many columns: 6-8 or more is appropriate
2. fill it with dummy tags of varying lengths and formats (some with hyphens and some without)

Expected behavior:

Tag background color extending past the end of the text to the right should not break onto a new line in a table cell unless there is text contained within the background color on the new line

Screenshots and Source

See above

You can help speed up fixing the problem by either

1. providing a simple reproduction
2. linking to your Quartz repository where the problem can be observed

Desktop (please complete the following information):

• Quartz Version: 4.3.0
• node Version: 20.11.1
• npm version: 10.2.4
• OS: Windows 11
• Browser: chrome

Additional context

Refer to how multi-column tables (containing only tags) render in Obsidian. The same table rendered in Obsidian as the one in Quartz from the screenshots above:

[MasssiveJuice08]

Hey @jackyzha0 a 'fix' for this is possible by setting whitespace to 'nowrap' for a.tag-link.internal.alias when it is a child of <td>, but it's a subjective one as it would mean tags in tables never wrap onto a new line.

Would you consider implementing 'nowrap' as fix?

It could have the unintended consequence of making some table columns disproportionately wider than they need to be because of a single long tag.