palantir/blueprint

Row header truncates row numbers > 100

Open

#5403 opened on Jun 28, 2022

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Status: needs more infohelp wanted

Description

Environment

  • Package version(s):

    "@blueprintjs/core": "^4.3.1", "@blueprintjs/select": "^4.2.1", "@blueprintjs/table": "^4.2.1",

  • Operating System: Mac OS Monterey 12.3.1

  • Browser name and version: Chrome Version 103.0.5060.53

Steps to reproduce

I was not actually able to reproduce this on Code Sandbox, so I suspect there are some CSS clashes, but row headers seem to not adjust the width properly to allow the entire row number to show in my application:

In a code sandbox: https://codesandbox.io/s/blueprint-sandbox-forked-z4oifh, I notice that the row headers adjust in width as you scroll, but this does not happen in my environment:

row headers

I thought it might have to do with the styling differences, and stripping the font family style in the dev console seems to fix things, but the computed styles don't differ to start with.:

Here is my computed styles for the pb4-table-header component,

image

and then the code sandbox: image

And then the computed styles for the inner bp4-table-row-name component:

image

and in codesandbox: image

Actual behavior

Row headers are truncated

Expected behavior

Row header should resize to not trucate the row number

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic CSSReact component knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the CSS rules that control the width of row headers in the Blueprint table component. Focus on the `bp4 table header` and `bp4 table row name` classes. Check if there is a missing `min width` or `overflow` property that causes truncation. Also examine any differences between the code sandbox and the reported environment, possibly due to global CSS or font family. Look at the relevant source files in the `packages/table/src` directory.