Numbered lists not showing more than one digit

[damithc]

Problem noticed in https://nus-cs2103-ay2425s2.github.io/website/schedule/week8/project.html

To replicate, you can preview the course website locally using instructions in https://github.com/nus-cs2103/website-base (remember to switch to cs2103 branch first)

[tlylt]

Is the problem still there? I just checked the page and it looks fine (on macOS Chrome):

• nus-cs2103-ay2425s2.github.io/website/schedule/week8/project.html

[damithc]

@tlylt When we checked this the other day, this problem seemed to be Safari-specific; it didn't appear on Edge, Firefox, or Chrome but appeared on Safari.

[tlylt]

Can confirm that the issue does exist on Safari, likely a browser CSS support/styling issue.

[Incogdino]

After spending some time investigating the issue, I noted that the most likely cause of the issue was due to the overflow:hidden property in main.css. However, a larger issue lies in ol and ul.

Inspecting the 2103 website on safari and chrome on macOS and adding custom list elements, I get this result:

• Tested with list of 9 elements and 10 elements
• In the safari browser, the tenth place is totally hidden by the overflow:hidden property
• In the chrome browser, the 1 of the tenth place is actually partially hidden away as it slightly flows out of the content area and gets hidden

Implications:

• Removing overflow:hidden is likely not going to be a long term solution as it might be needed for some use cases.
• Having > 100 elements in the list (though uncommon) will hide away the hundredth place in both safari and chrome browsers as shown below (going from 99th element to 100th element in chrome browser on macOS):

Looking into markbind.css and bootstrap.css:

• padding-left: 1.5rem sets a padding of 24px but for tenth place to properly shows, it needs at least 32px.
• By default, ol and ul uses list-style-position: outside which right-aligns the list numbers
• bootstrap.css also specifies a 32px padding-left to ol and ul and so lists that are >100 do not display their hundredth place

Potential solutions:

1. Change to list-style-position: inside which will left-align the list numbers while preserving padding-left: 1.5rem. This displays the numbers starting from the largest position as shown below. However, the drawback would be that the start of text would gradually be off skewed as the list number increases as noted by the start of the 10th postion.

Things to note:

• Solution should keep indentation reasonable, especially for mobile devices (#1669)

[Incogdino]

@damithc any thoughts on this? I think left aligning the numbers is the best option to go for here since it still keeps the indentations reasonably small.

[damithc]

@damithc any thoughts on this? I think left aligning the numbers is the best option to go for here since it still keeps the indentations reasonably small.

@Incogdino I'm OK with this solution.