Increase line-height in HoverCard to prevent text truncation #1112
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
matthew-white
commented
Dec 16, 2024
| line-height: 1; | ||
| padding: $padding-panel-body; | ||
| padding-bottom: 12px; | ||
| line-height: 1.2; |
There was a problem hiding this comment.
This is still less than the default, but it's a number that we use in several places in Frontend.
ktuite
approved these changes
Dec 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR attempts to address the issue described at getodk/central#670 (comment).
I actually had difficulty reproducing the issue locally. I can see that Szymon is seeing a different font than I am. However, after trying each of the fonts listed in the CSS, I don't see text truncation:
central-frontend/src/assets/css/bootstrap.css
Line 281 in f1949ff
I tried in both Chrome and Firefox.
At some point, we should maybe look into what options we have around standardizing fonts in Central. For now, I'm hoping I can solve the issue by increasing the line height. I strongly suspect that the text truncation that Szymon is seeing is due to
line-heightbeing set to 1 in theHoverCardcomponent.What has been done to verify that this works as intended?
I wasn't able to reproduce the issue, so my main goal was to keep the look of the hover cards as consistent as possible while also increasing the line height. I compared hover cards side-by-side before/after making this change.
Why is this the best possible solution? Were any other approaches considered?
The main change I want to try is increasing the line height. After making that change, I also had to fiddle with margin/padding.
Before submitting this PR, please make sure you have:
npm run testandnpm run lintand confirmed all checks still pass OR confirm CircleCI build passes