search

quran / quran.com-frontend-next

Frontend build on next.js
https://quran.com
1.41k stars 420 forks source link

[bug]: Media Maker overflows for long verses #2206

Open rehandaphedar opened 1 month ago

rehandaphedar commented 1 month ago

Is there an existing issue for this?

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.

image image

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)

successbyte commented 1 week ago

Salaamu Alaikum would you please assign me to this issue