Decimal to binary converter - Stack animation looks bad when default font is large

[hbar1st]

Describe the Issue

Please see the video I made of the stack animation created by the end of the decimal to binary converter project. The layout is quite messy in my view once the blocks start being displayed with an explanation. If in agreement, it would be great to get a fix for it. Video:

https://github.com/user-attachments/assets/abafcc3a-7a0d-42ef-95bc-f2c4fc6b6de0

Other thoughts which may or may not be welcome. The stack animation itself is not good. I think the blocks need to actually 'stack up' instead of being displayed as evenly spaced blocks in space. Something like this image: https://cdn.programiz.com/sites/tutorial2program/files/stack.png What I like about the image shown is that the stack has edges (it looks like an open box that allows things to go into it) I also like that the blocks are close together.

thanks for your attention

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-recursion-by-building-a-decimal-to-binary-converter/step-109

Your code

complete the expected step code and test the animation

Expected behavior

neater display where blocks are not overlapping. Also preferably a type of 'container' line to represent the stack 'box'. Also the blocks should be closer together vertically.

Screenshots

No response

System

• Device: laptop
• OS: Windows 11 Pro Version 23H2 OS Build 22631.3880
• Browser: Chrome
• Version: 126.0.6478.127 (Official Build) (64-bit)

Additional context

No response