mattermost-community/focalboard

Feature Idea: Wrap checkbox text

Open

#2,410 opened on Feb 28, 2022

View on GitHub
 (0 comments) (2 reactions) (0 assignees)TypeScript (26,187 stars) (2,542 forks)user submission
EnhancementHelp WantedUp for grabs

Description

Summary

Checklist items are currently only one line long, so if the text goes beyond the width of the modal, then the user has to highlight and scroll to see the full text content.

Long text on checkboxes should wrap to the next line if if exceeds the width of the card modal, so users can easily see the content on the checkboxes without needing to highlight and scroll.

How important this is to me and why

Importance: Medium

Checkboxes are used to create subtasks and checklists, so supporting text wrapping will make the feature more usable.

Use cases:

  1. Long text on checkboxes

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
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
Basic CSSReact components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90
Research direction
The issue is about wrapping long checkbox text in Focalboard's checklist items. Likely the checkbox component is in a file like 'src/components/checkbox.tsx' or within a card view. The fix involves adding CSS property 'word wrap: break word' or 'overflow wrap: break word' to the label element. Check the current styling in the component's stylesheet or CSS in JS. Refer to similar wrapped text patterns in the codebase.