Skip to content

Short line height in dropdown label causes text clipping #4332

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
Closed
seancolsen opened this issue Mar 13, 2025 · 2 comments · Fixed by #4344
Closed

Short line height in dropdown label causes text clipping #4332

seancolsen opened this issue Mar 13, 2025 · 2 comments · Fixed by #4344
Assignees
@seancolsen
Labels
ready Ready for implementation regression restricted: maintainers Only maintainers can resolve this issue type: bug work: frontend Related to frontend code in the mathesar_ui directory
Milestone
v0.2.2

Comments

@seancolsen
Copy link
Contributor

This has been bugging me.

There are lots of way to reproduce this. Here's one:

  1. Add a role named jumpy_quail_grabs_yogurt.

  2. Configure a collaborator with that role.

  3. Observe text clipped:

    Image

There are a handful of places throughout the codebase that have line-height: 1;. In fixing this issue, I think we probably ought to audit these and see if other places need the same fix. My understanding is that line-height shouldn't go below 1.2.

I put this in 0.2.2 because the problem is somewhat glaring on the UI I'm building for #4313

Image
@seancolsen seancolsen added ready Ready for implementation regression restricted: maintainers Only maintainers can resolve this issue type: bug work: frontend Related to frontend code in the mathesar_ui directory labels Mar 13, 2025
@seancolsen seancolsen added this to the v0.2.2 milestone Mar 13, 2025
@seancolsen seancolsen self-assigned this Mar 13, 2025
@seancolsen
Copy link
Contributor Author

@pavish I traced the short line-height in Dropdown.scss to your changes in #3810. Do you recall why you made this change? I would like to revert it, but I want to first understand the problem you were trying to solve.

@pavish
Copy link
Member

pavish commented Mar 14, 2025

@seancolsen I wanted the dropdown to have the same height as other input fields such as buttons and textbox, so that visually it's consistent, especially when elements are placed together.

I agree that line height should be atleast 1.2, but we should make that change for all input elements.

@seancolsen seancolsen mentioned this issue Mar 15, 2025
Merged
7 tasks
@seancolsen seancolsen mentioned this issue Apr 19, 2025
Open
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@seancolsen seancolsen

Labels
ready Ready for implementation regression restricted: maintainers Only maintainers can resolve this issue type: bug work: frontend Related to frontend code in the mathesar_ui directory
Projects
None yet
Milestone
v0.2.2
Development

Successfully merging a pull request may close this issue.

Revert custom line-height on Dropdown mathesar-foundation/mathesar
2 participants
@seancolsen @pavish