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: use CSS grid to deal with flyout space #400

Open
humitos opened this issue Oct 10, 2024 · 0 comments · May be fixed by #486
Open

Flyout: use CSS grid to deal with flyout space #400

humitos opened this issue Oct 10, 2024 · 0 comments · May be fixed by #486

Comments

@humitos
Copy link
Member

humitos commented Oct 10, 2024 •
edited
Loading

In #360 we mentioned we may need to use CSS grid or a similar technique to deal with spacing. Mainly when the flyout is collapsed and the version name is long.

One approach could be to use CSS grid areas: https://ishadeed.com/article/css-grid-area/

We need to talk more about this and explore alternatives (like flexbox, #360 (comment)). Also note that most of this will change when working on the next iteration of the flyout as a "toolbar" or similar: #53
@humitos humitos mentioned this issue Oct 10, 2024
Merged
@ericholscher ericholscher mentioned this issue Nov 19, 2024
Draft
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 linked a pull request Jan 8, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
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
@humitos