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

Use font-variant-numeric: tabular-nums; for known numeric columms #4085

Open
zackkrida opened this issue Dec 17, 2024 · 2 comments · May be fixed by #4097
Open

Use font-variant-numeric: tabular-nums; for known numeric columms #4085

zackkrida opened this issue Dec 17, 2024 · 2 comments · May be fixed by #4097
Labels
affects: ux Related to user experience help wanted Community contributors can implement this ready Ready for implementation type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory
Milestone
Backlog

Comments

@zackkrida
Copy link
Contributor

Problem

When scanning a column of numbers in Mathesar, particularly currency values, there are subtle shifts in alignment due to varying widths of different numbers. Notice the gaps on the left-hand size of this screenshot:

image

Proposed solution

The CSS font-variant-numeric: tabular-nums; applied to these cells would give each digit a consistent width. Here's the "after" screenshot:

image

Notice the "1"s in particular are rendering differently.

Additional context
@zackkrida zackkrida added type: enhancement New feature or request needs: triage This issue has not yet been reviewed by a maintainer affects: ux Related to user experience work: frontend Related to frontend code in the mathesar_ui directory and removed needs: triage This issue has not yet been reviewed by a maintainer labels Dec 17, 2024
@zackkrida
Copy link
Contributor Author

@seancolsen or @pavish How complex is the frontend work necessary to make this seemingly minor change? Technically it would involve applying CSS to the cells of particular column types.

I'm asking in case this would be worthy of a good first issue, in which case I would like to add some technical description of how to implement this and label it as such.

@zackkrida zackkrida added this to the Backlog milestone Dec 17, 2024
@zackkrida zackkrida added the ready Ready for implementation label Dec 17, 2024
@seancolsen
Copy link
Contributor

Hmmm. Probably not trivial. Changes that depend on specific data-types can sometimes touch on some particularly difficult code. I'd recommend labeling this as "help wanted" but not "good first issue".

@zackkrida zackkrida added the help wanted Community contributors can implement this label Dec 17, 2024
@sharath-1517 sharath-1517 linked a pull request Dec 23, 2024 that will close this issue
Open
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
affects: ux Related to user experience help wanted Community contributors can implement this ready Ready for implementation type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

Fixed the misalignment in number text of money type cell sharath-1517/mathesar
2 participants
@seancolsen @zackkrida