refactor: ui tweak to make badge position fixed

[ss-dimasm]

Pull request checklist

Detail as per issue below (required):

fixes: #

part of #192, minor UI tweak for BottomBarItem. The badge position is breaks when composed in wider components and a little typo font size usage on there

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for 2b53ae81	✅ 100.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (2b53ae8)	Report Missing	Report Missing	Report Missing
Head commit (4b11bf1)	4367	3912	89.58%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#232)	18	18	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

[kurtdoherty]

@ss-dimasm can you please add screenshots showing before and after? 🙏

[ss-dimasm]

@kurtdoherty , this is the visual; the badge position is more cornered than before

left is in this PR, right is in main

and it will also have the flex: 1 1 0 property to automatically fill available space within a flex container

[ss-dimasm]

@kurtdoherty, hold on I surprised the total files changed is 32 and it's more than 1000 lines 😱😱, fixing

[kurtdoherty]

@ss-dimasm thanks for the details 🙏 This PR currently includes a bunch of changes that I think belong to other branches we've merged in. If you aren't already rebasing your branch onto latest, can you please do so. Ideally, this branch only includes the changes relevant to it; not historical changes that have been pulled in from main.

[ss-dimasm]

apologies @kurtdoherty, I didn't notice while rebasing

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for f37b6dd1	✅ 100.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (f37b6dd)	Report Missing	Report Missing	Report Missing
Head commit (e2e868a)	4422	3969	89.76%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#232)	9	9	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

[kurtdoherty]

LGTM 👍

[kurtdoherty]

nit-pick: I don't think status is an appropriate ARIA role. I'm not sure what is, but when I read the MDN docs on the status role, it doesn't feel quite right 🤷

[ss-dimasm]

I don't think status is an appropriate ARIA role.

ah yes, I forgot to remove it for storybook styles usage after we've agree on this feedback