557-refactor: Widget numbers

[Quiddlee]

What type of PR is this? (select all that apply)

• 🍕 Feature
• 🐛 Bug Fix
• 🚧 Breaking Change
• 🧑‍💻 Code Refactor
• 📝 Documentation Update

Description

Refactor Numbers widget

Related Tickets & Documents

• Related Issue FSD: Widget Numbers #557
• Closes FSD: Widget Numbers #557

Screenshots, Recordings

Before

After

Added/updated tests?

• 👌 Yes
• 🙅‍♂️ No, because they aren't needed
• 🙋‍♂️ No, because I need help

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[github-actions]

Lighthouse Report:

• Performance: 93 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[SpaNb4]

run visual now

[SpaNb4]

I would ask @dzmitry-varabei and @Illia-Sakharau for their approval of the changes

All screenshots below are in before and after order:

Screenshoots

[github-actions]

Lighthouse Report:

• Performance: 86 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[Illia-Sakharau]

Regarding #585 (comment) from @SpaNb4

In my opinion, the "before" options look better on all resolutions.
And if there is an opportunity to do it as close as possible to how it was.

[github-actions]

Lighthouse Report:

• Performance: 85 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[github-actions]

Lighthouse Report:

• Performance: 97 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[Quiddlee]

Update

[github-actions]

Lighthouse Report:

• Performance: 68 / 100
• Accessibility: 100 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[SpaNb4]

Shouldn't we apply white-space: nowrap; to the title for large screens?

[Quiddlee]

Shouldn't we apply white-space: nowrap; to the title for large screens?

I don't quite get that, i have no wrapping even without white-space: nowrap;