[IMPROVEMENT] Change styling on answer's page so answers don't overflow/overlap

[nathenialalleyne]

What improvement are you suggesting?

If the answer given is too long, they expand past the answer box and overlap

Why should make this improvement?

Clogs up answer page and looks terrible

How can we make these improvements?

Either add an overflow scroll for the entire box or just for the answer portion
Wrap text to the next line (This can change the box size might be the less ideal solution)

[prakhartiwari0]

The biggest answer that possibly can be their is the product of 99,999 x 99,999, which is 9999800001
Here is a brief explanation: https://github.com/prakhartiwari0/Arito/issues/35#issuecomment-1325875153

And as you can see, it isn't causing problems (at least on desktop)

[prakhartiwari0]

I just checked this on mobile, it is all good there also!

If you have any more queries or suggestions, share them and we will discuss them here 😄

[awnnsheca]

The answers are still overlaping. And it would look better if the answers are centered and the boxes would have had the same size.

[awnnsheca]

Something like this would look better :)

[prakhartiwari0]

Thanks for your suggestion, you are right in the UI part, but I would like to know what are your thoughts on the alignment of answers.
Doesn't it matter (at least in addition & subtraction)? 🤔

Is there anything else we could do to prevent the overlapping of the answers?

Also,
The largest answer you can get in the VERY HARD level, in Addition, is 19999. You can see below that the alignment is a bit disturbed which we can adjust by reducing the font size or maybe changing some padding, margin or alignment properties.

The largest answer you can get in the VERY HARD level in Multiplication is 99990000 (The overall largest answer). As you can see the same problem is happening here, I guess we need to reduce the font size of question numbers and answers.

I would love to know what according to you is a good thing to do, does alignment matter or not, and should we make them centered (disturbing the alignment which is not good at present also), or should we change the font-size, padding & margin?

[awnnsheca]

I think the size of question and answer should be even, so rather than changing the font size we must center the alignment. I tried to center the alignment but the overflowing still persists, for that it would be much better to make the box sizes same.

[prakhartiwari0]

Are you saying to make the boxes have fixed width and height? @awnnshikaa

[awnnsheca]

yes @prakhartiwari0

[prakhartiwari0]

yes @prakhartiwari0

But isn't that bad for responsiveness? We already have used the grid layout for the div that contains all the boxes in this CSS https://github.com/prakhartiwari0/Arito/blob/main/css/main.css#L428
and have given min-width and max-width on the boxes here https://github.com/prakhartiwari0/Arito/blob/main/css/main.css#L436

[awnnsheca]

yes @prakhartiwari0

But isn't that bad for responsiveness? We already have used the grid layout for the div that contains all the boxes in this CSS https://github.com/prakhartiwari0/Arito/blob/main/css/main.css#L428 and have given min-width and max-width on the boxes here https://github.com/prakhartiwari0/Arito/blob/main/css/main.css#L436

keeping the respo

nsiveness i've made a few changes. Does this look better?

[awnnsheca]

[prakhartiwari0]

@awnnshikaa Can you please share a proper screen recording where you demonstrate your modified code and how the website looks in all the different screen sizes (using dev tools)?

[awnnsheca]

@prakhartiwari0 Screencast from 05-01-23 04:01:45 PM IST.webm

[awnnsheca]

aligned and justified to center as well as increased the minmax grid size to 300px