Skip to content
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

[frogend] Replace ch units to prevent layout shift on page load #1301

Merged
merged 1 commit into from
Jan 5, 2023

Conversation

f0x52
Copy link
Contributor

@f0x52 f0x52 commented Jan 4, 2023

We use the ch CSS unit in a few places, most notably the main page column width. It's relative to the current font's width of the 0 character, which has the fun side-effect that it changes value during page load, when the font gets swapped from the fallback sans-serif to the asset loaded Noto Sans.
I picked rem values instead that are roughly equivalent in apparent size, so there's no more page-load shift

Checklist

Please put an x inside each checkbox to indicate that you've read and followed it: [ ] -> [x]

If this is a documentation change, only the first checkbox must be filled (you can delete the others if you want).

  • I/we have read the GoToSocial contribution guidelines.
  • I/we have discussed the proposed changes already, either in an issue on the repository, or in the Matrix chat.
  • I/we have performed a self-review of added code.
  • I/we have written code that is legible and maintainable by others.
  • I/we have commented the added code, particularly in hard-to-understand areas.
  • I/we have made any necessary changes to documentation.
  • I/we have added tests that cover new code.
  • I/we have run tests and they pass locally with the changes.
  • I/we have run go fmt ./... and golangci-lint run.

@f0x52 f0x52 added the frontend Frontend-related stuff label Jan 4, 2023
@tsmethurst tsmethurst merged commit de74cc6 into main Jan 5, 2023
@tsmethurst tsmethurst deleted the frogend-page-load-size branch January 5, 2023 08:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend Frontend-related stuff
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants