Skip to content

Fix error and error-behind css classes out-of-sync #3400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 29, 2025

Conversation

yoKurt94
Copy link
Contributor

The error-behind in some cases line breaks before error does, e.g. in docs/handbook/2/objects.html:

Bildschirmfoto 2025-05-21 um 12 15 29

you can see

'string[]'.

of the error-behind, which is supposed to be invisible, in the next line.

The problem is that the CSS classes error and behind-error are slightly out of sync:

  1. The margin-right: -2px is obsolete
  • this rule is no longer necessary due to the padding adjustments described below
  1. The padding of error should be 6px 8px 6px 12px
  • it was 6px 6px 6px 14px, but 14px is too much since the ancestor <pre class="shiki light-plus twoslash lsp" ...> has a border of 1px + 12px padding
  • since the error class has a border-right: 2px which hangs 1px over the border of the <pre> element, the padding should be 12px
  • the right padding of 8px compensates the removed margin-right: -2px
  • incorrect padding lead to misalignment:

Bildschirmfoto 2025-05-28 um 12 00 25

  1. the error-behind span line breaks before the error span
  • since error is absolute, it ignores the right padding of the ancestor <pre> of 12px
  • therefore, the inner span of error needs a margin-right: 12px to wrap simultaneously

@jakebailey jakebailey added the deploy-preview Enables automatic deployments to preview environments on a PR label May 28, 2025
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3400.centralus.5.azurestaticapps.net

@jakebailey jakebailey merged commit b0e9a5c into microsoft:v2 May 29, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
deploy-preview Enables automatic deployments to preview environments on a PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants