themesberg / themesberg/flowbite
Progress: The bar has wrong radius in small percentages.
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
If the width of the progress is less than its height, the radiuses are smaller.
To Reproduce
- Set the percentage of any progress to very small value. Example: https://play.tailwindcss.com/0PQ4gkn6bE
Expected behavior
The radius of the progress bar is the same for all values.
Screenshots
Desktop (please complete the following information):
- OS: macOS
- Browser Chrome
Solution
Add overflow-clip to the wrapping div and set the width of progress bar with style="transform: translateX(calc(-100% + 1%))". But there may be other solutions.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the progress component and reproduce the small-percentage case using the linked Tailwind Play example. Compare the bar’s radius at small and larger values, then verify that the progress bar keeps the same radius across percentages without changing the expected component behavior.
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
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100