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

Improve side panel layout #701

Merged
merged 2 commits into from
Dec 17, 2024
Merged

Improve side panel layout #701

merged 2 commits into from
Dec 17, 2024

Conversation

vgeorge
Copy link
Member

@vgeorge vgeorge commented Nov 7, 2024

Contributes to #586 and #675. Currently, the side panel has a variable width that changes according to the length of the property values, causing layout shifts, occupying too much screen space, and generally providing a suboptimal UI experience.

This PR aims to improve that by:

  • Setting a fixed width of 24rem
  • Adding a small space (4px) between the tooltip and the map
  • Truncating property names
  • Breaking words/lines in property values
  • Improving scroll behavior

Demo, non-scrolled:

non-scrolled

Scrolled:

scrolled

@kylebarron can you please review?

- Set fixed width of 24 rem
- Add a little space between the tooltip and the map (4px)
- Truncate property names
- Break word/lines in property values
- Improve scroll behaviour
@vgeorge vgeorge requested a review from kylebarron November 7, 2024 13:28
Copy link
Member

@kylebarron kylebarron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Thanks!

@kylebarron kylebarron merged commit 29d5d0f into main Dec 17, 2024
5 checks passed
@kylebarron kylebarron deleted the fix/tooltip-styles branch December 17, 2024 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants