fix: resolve footer overflow issue on tablet screens causing horizontal scroll

[habdelrahmane]

Summary

This PR resolves an issue where the footer was overflowing horizontally on tablet view between 768px and 1230px, due to a recently changed CSS rule in the pageContainer mixin.
The overflow caused poor vertical scrolling performance, impacting the reading experience.

The issue is fixed by unsetting the width in the .flowItem class, ensuring proper layout without altering the utility.scss file.

Type of change

• Bug fix (non-breaking change which fixes an issue)

Test Plan

• Verified that the horizontal overflow issue is resolved on an iPad and in browser developer tools for tablet view between 768px and 1230px.
• Tested on different tablet devices and screen sizes to ensure consistent behavior.
• Checked that no other layout issues were introduced, and confirmed that the footer now behaves correctly across tablet breakpoints.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• New and existing unit tests pass locally with my changes

Screenshots or videos

Before	After
Overflowing footer	Corrected footer

[vercel]

@habdelrahmane is attempting to deploy a commit to the Quran Team on Vercel.

A member of the Team first needs to authorize it.

[habdelrahmane]

I’ve temporarily drafted this PR as it only fixes the footer overflow issue while reading a Surah on tablet, thus greatly improving the reading experience by not having a horizontal scroll anymore.

However, the index page still has an overflow issue, because the index .flowItem also inherit the width CSS rule from pageContainer.

I didn’t alter the pageContainer mixin in _utility.scss in my initial PR.

I’m considering updating the PR by simply reverting the width to 80% in the pageContainer mixin on tablet, like it was before #2308.

@osamasayed may I ask you your thought about this?
May Our Lord bless you.

[habdelrahmane]

@osamasayed @AhmedCodeGuy If you have a moment, could you please take a look at the quoted post please?
I’m happy and proud to provide this easy fix, with God’s will.
May Our Lord bless you, thanks!

I’ve temporarily drafted this PR as it only fixes the footer overflow issue while reading a Surah on tablet, thus greatly improving the reading experience by not having a horizontal scroll anymore.

However, the index page still has an overflow issue, because the index .flowItem also inherit the width CSS rule from pageContainer.

I didn’t alter the pageContainer mixin in _utility.scss in my initial PR.

I’m considering updating the PR by simply reverting the width to 80% in the pageContainer mixin on tablet, like it was before #2308.

@osamasayed may I ask you your thought about this? May Our Lord bless you.