themesberg / themesberg/flowbite

Progress bar component with label inside doesn't support small % values.

Open Beginner friendly
#1,016 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
Value for the small % is almost invisible in light theme:
image
It (sort of) works for dark theme though:
image

As mentioned in https://github.com/themesberg/flowbite/issues/439 radius is also wrong for small values. (simple overflow-hidden should fix it though)

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://play.tailwindcss.com/SgTBzNGCEt

Expected behavior

  1. Values should be visible all the way starting from 0% and going up to 100%
  2. Radius should be consistent despite the value (solution also provided in the link above)

Screenshots
provided above

Desktop (please complete the following information):

  • OS: Windows (possibly all)
  • Browser: Chrome (possibly all)
  • Version: Chrome 131

Smartphone (please complete the following information):

  • Device: Google Pixel 6 (possibly all)
  • OS: Android
  • Browser: Chrome (possibly all)
  • Version: Chrome 131

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction at https://play.tailwindcss.com/SgTBzNGCEt and inspect the progress bar component markup and styles. Compare small percentage values in light and dark themes, then verify that values from 0% to 100% remain visible and the radius stays consistent.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.