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.

Sign up for GitHub

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

Jump to bottom

Flyout: element alignment is wrong with different font sizes #485

Closed
agjohnson opened this issue Jan 8, 2025 · 0 comments · Fixed by #486
Closed

Flyout: element alignment is wrong with different font sizes #485

agjohnson opened this issue Jan 8, 2025 · 0 comments · Fixed by #486
Labels
Accepted Accepted issue on our roadmap Bug A bug

Comments

@agjohnson
Copy link
Contributor

agjohnson commented Jan 8, 2025 •
edited
Loading

Because the flyout CSS is using a mix of fixed width (5px instead of 0.25em), increasing/decreasing the font size doesn't scale all elements or their positioning/spacing correctly.

Here is a flex grid view of the elements:

image

Notice that the logo doesn't scale and the icons aren't centered.
@agjohnson agjohnson added Bug A bug Accepted Accepted issue on our roadmap labels Jan 8, 2025
agjohnson added a commit that referenced this issue Jan 8, 2025
@agjohnson
Fix flex grid and usage of static lengths
5c3c407 
- Use flex grid grow/shrink/basis to control the grow/shrink behavior of
  flyout header elements
- Don't wrap header flex items
- Truncate header flex items using ellipsis overflow
- Control height through font height and tame usage of line-height to be
  consistent
- Move padding from header to header>span so that logo doesn't have to
  break out of content height or line height to display larger than the
  font size
- Increase the flyout width and make width controllable by variable

----

- Fixes #485
- Fixes #400
- Refs #394
@agjohnson agjohnson mentioned this issue Jan 8, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accepted Accepted issue on our roadmap Bug A bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix flex grid and usage of static lengths readthedocs/addons
1 participant
@agjohnson