Steps to reproduce

1. Go to /myprojects
2. Observe the position of the content of a project card (image, text)
3. Toggle the theme
4. Observe the change in position of the content of a project card (image, text)

TODO

Investigate how box-sizing (or other features) could reduce the jitter of project cards when switching between light and dark mode. See the Tailwind docs for box sizing.

• running npm audit fixes the issues, but breaks the builds and therefore requires additional investigation

Official Prettier plugin

• This should be similar to how the My Projects dynamically generates the markup based on the data defined in the script
• Dealing with large blocks of text for the body content may require some investigation if the naive solution has cumbersome DX

Increasing text tracking adds extra space between characters. However, increasing the tracking also adds that additional space past the last character as well; this is particularly noticeable for underlines (text decorations) and focus outlines.

Outline with tracking-normal:

Underline (text decoration) with tracking normal:

Outline with tracking-widest:

Underline (text decoration) with tracking widest:

This can be seen in the "Project card" component. In Chrome it renders as expected. If you drop the text to "text-xl" size then the outline wraps as expected but larger font sizes do not scale to outline the text as expected.

Issue in Firefox:

Comparison in Chrome: