[bug]: Media Maker overflows for long verses

[rehandaphedar]

Is there an existing issue for this?

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

Describe the bug

When using the Media Maker with longer verses, they will overflow out of the box and/or out of the screen unless using a very small font size.

I had a similar project a while back, and I faced a similar issue. I had used a hacky solution (calculating the number of characters in the verse and changing font size accordingly.

However, I think a better solution could be to split the verse into different phrases, based on the word timings for each recitation, as it would preserve the font size. Additionally, the changing font size solution sometimes would lead to weird results depending on the formula used.

Relevant log output

No response

Steps to reproduce

1. Open Media Maker and enter any long verse, such as 2:282.

Environment (please complete the following information) and Add any other context about this bug

(Probably not relevant) OS: Arch Linux Browser: Firefox Version: 130.0.1

Environment

Production(quran.com)