Set max-width in problem2html css

[Matistjati]

In my experience, people don't really use problem2html because it looks very different from Kattis because we have no max-width set. This becomes especially bad if you have a wide monitor.

So let's set some max-width. As far as I'm aware, the only two CCS that use poblemtools and render to HTML are Kattis and omogenjudge, both of which set a max-width similar to LaTeX. So let's render something closer to what you actually get.

[Tagl]

I would like to note however that the width on Kattis is smaller than what you get in the PDF. It is in fact very very small.
You can see an example here: https://open.kattis.com/problems/dialhomedevice
The table fits in the PDF but doesn't on the web.

[Matistjati]

I've tried to mimic Kattis as well as possible with the width. Actually catching your specific instance is kinda hard, unfortunately. From some local testing, we would need to mimic Kattis down to the font, which feels excessive.
However, maybe we should consider creating a card-like background as Kattis does.

[Tagl]

To be clear I'm just arguing for wider text area on Kattis in their UI. That was all my comment was about. It just felt relevant to what you're adding here.

…

On Mon, Sep 28, 2026, 00:54 Joshua Bergman Andersson < ***@***.***> wrote: *Matistjati* left a comment (Kattis/problemtools#493) <#493 (comment)> I've tried to mimic Kattis as well as possible with the width. Actually catching your specific instance is kinda hard, unfortunately. From some local testing, we would need to mimic Kattis down to the font, which feels excessive. However, maybe we should consider creating a card-like background as Kattis does. — Reply to this email directly, view it on GitHub <#493?email_source=notifications&email_token=AB2ZBKQAAA7YLZHGJZTPQOD5RGZEXA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKOBWGE2DINRZGEZ2M4TFMFZW63VHMNXW23LFNZ2KKZLWMVXHJLDGN5XXIZLSL5RWY2LDNM#issuecomment-5861446913>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2ZBKQTYFSH6DAEXF4YCPL5RGZEXAVCNFSNUABEKJSXA33TNF2G64TZHMZDENBZGQ4TQMB3JFZXG5LFHM2TKNJXG43DOMJRGSQXMAQ> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/AB2ZBKRRKVQN4CMIC2D5SUT5RGZEXA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKOBWGE2DINRZGEZ2M4TFMFZW63VHMNXW23LFNZ2KKZLWMVXHJKTGN5XXIZLSL5UW64Y> and Android <https://github.com/notifications/mobile/android/AB2ZBKVNBEQU5H224VZGLPD5RGZEXA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTKOBWGE2DINRZGEZ2M4TFMFZW63VHMNXW23LFNZ2KKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI>. Download it today! You are receiving this because you commented.Message ID: ***@***.***>