[feature]: Improve Timeline Component Readability

[samehelgazar95]

Is there an existing issue for this feature?

• [X] There is no exsiting issue for this feature

Summary

The current timeline component on the website has the timeline indicator (dates) left-aligned and the text right-aligned, as shown in the attached image. This makes it difficult to read and understand the information at a glance.

I propose that the timeline text and indicator are aligned vertically, as shown in the attached image. This would improve the readability of the component and make it easier for users to understand their progress.

First Suggestion Solution:

Second Suggestion Solution:

Your purposed solution for this feature

Two options to vertically align text and indicator:

Flexbox: Set container's flex-direction: column for vertical stacking. Adjust margins for spacing. Inline-block: Set text paragraphs to display: inline-block and adjust margins for alignment.

[samehelgazar95]

I'd be happy to help implement this change if it's helpful. Please let me know if there's anything I can do.

[m7d2]

I like the first suggestion; it's more readable that way.

[aliraheel626]

first suggestion is certainly better