gristlabs/grist-core

UX: It's hard to read the column name when cropped

Open

#543 opened on Jun 22, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (3,613 stars) (168 forks)batch import
good first issuegouv.fr

Description

I noticed that the column name, when they are cropped, are hard to be identified unless we expand the width. 2023-06-22_08-05

However, sometimes it does not make sense to expand the column width, as the values are just simple values (numbers, boolean checkboxes).

I am not sure how to solve this. Here are some options I have in mind:

  • add a tooltip in the column name so we can have the full name on demand (probably not mobile-friendly);
  • allow the user to expand the height of the header, so the column name is rendered on several lines;

What do you think?

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontend
Issue type
feature
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.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Investigate the header component in the Grist frontend, likely in 'app/client/components/GridView'. Look for existing tooltip patterns. Decide between using HTML title attribute or a custom tooltip component. Implement hover over to show full column name. Test on narrow columns and consider mobile users. Optionally, explore multi line header expansion.