#printerUpgrades is a HTML table, that contains a list of upgrades (levelling up functionality to be added in the future). As the table is too tall, it cannot fit fully inside #menuContent, the parent element. This was fixed by setting overflow-y: auto on #menuContent. This also makes sense from a general perspective for the other tabs in #menuContent.

However, the table's header row will be hidden if the user scrolls down. As such, it would be best to "freeze" the top row. This is currently done by position: sticky, which works as intended. However, there seems to be a 2px gap, that isn't padding or margin, and it is transparent, allowing things "below" it to be seen.

The following gif shows the behaviour of scrolling inside #printerUpgrades:

Some upgrade text can be seen in the gaps of the top row.

Inside Game.run(), the Game.print() function is executed every 5 seconds (or shorter depending on the upgrade). However, if there has not been a successful print in the past 5 seconds (or shorter depending on the upgrade), the Game.print() function will execute every tick.

If there is insufficient ink/paper, the Game.print() function will trigger a notification to inform the user. From the above paragraph, this would cause the notification to keep triggering every tick. As such, in the code, there is a check to compare the last notification and the new notification. If it is the same, then a duplicate notification is not displayed. However, if another type of notification is triggered, then the insufficient ink/paper notification will keep triggering every tick, which can lead to flooding the notifications area.

This issue only occurs when there is insufficient ink or paper.