[PLAY-1884] Responsive Progress Pill #4260
Open
+11
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do? A clear and concise description with your runway ticket url.
Story
This PR makes our Progress Pill kit more responsive by setting the width of the pill to 100% of the container and the
max-width: 45px
which is our current fixed width. This will allow the pills to expand and shrink inside their container.Screenshots: Screenshots to visualize your addition/change
![Screenshot 2025-02-11 at 1 40 06 PM](https://private-user-images.githubusercontent.com/168447880/412119601-d00f0c5c-bf04-4311-93f4-824917af95f2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzODI5MjMsIm5iZiI6MTczOTM4MjYyMywicGF0aCI6Ii8xNjg0NDc4ODAvNDEyMTE5NjAxLWQwMGYwYzVjLWJmMDQtNDMxMS05M2Y0LTgyNDkxN2FmOTVmMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQxNzUwMjNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05NGY0MWJjNGI1YTM2OTQ4NzJjYzAwMDVhZDdkMmRlYWEyMGJhMmY1MjY0MWFhYTg0ZmI0YmI4MGI1N2U2NmFmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.nKuaHS87RrSYY5f2dozbvTPFkogY1YGMHVrYX-VcdNY)
![Screenshot 2025-02-11 at 1 40 32 PM](https://private-user-images.githubusercontent.com/168447880/412119739-66f7f8f7-0a50-47fa-98c4-93607e71aaf8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzODI5MjMsIm5iZiI6MTczOTM4MjYyMywicGF0aCI6Ii8xNjg0NDc4ODAvNDEyMTE5NzM5LTY2ZjdmOGY3LTBhNTAtNDdmYS05OGM0LTkzNjA3ZTcxYWFmOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQxNzUwMjNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNTYzNmQ4NGNiYzE3MmQwZGMwMDY2OWUxNzhlNjZhZjM4YzVjMjllYjk3ZjRlM2U0ZTkwYWNhMGY4MzdhZjVhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.1vA65bCuRwuMrheHj_tZW97vY9jq8EGj1YPOYmY57EA)
How to test? Steps to confirm the desired behavior:
Checklist:
enhancement
,bug
,improvement
,new kit
,deprecated
, orbreaking
. See Changelog & Labels for details.milano
label to show I'm ready for a review.