fix: code blocks in preview

[dawidsawa]

Resolves #155

[ubiquity-os-deployer]

451c73d

58229a8

be43804

8d2d25f

a1b9662

d42ffd7

[dawidsawa]

Before

After

[zugdev]

Please add overflow-x: scroll in code block, to handle issues like this one

Also consider adding a slightly darker background color for the code block.

[dawidsawa]

Given the background is already very dark adding even an absolute black wouldn't be much visible anyway, so perhaps using a lighter background like here:

[zugdev]

Please consider the inverted style too because when browser is in light mode the following happens:

Also:

1. Add some padding so text is not too close to the code block's border. Notice that the biggest difference from our code block to GitHub's is padding:

2. Make the font size inside the code block 12px, which is a tiny bit smaller, allowing for more content to be shown.

[dawidsawa]

How about now:

[zugdev]

That's better, one last thing check this issue. The code block is unnecessarily overflowing to the right:

We want it to look like:

It seems it's because of the added padding. If you know a good solution that doesn't involve calc -32px, please use it.

[dawidsawa]

EDIT: my bad, that did not fix it.

https://a642e753.devpool-directory-ui.pages.dev/?issue=2595388408

[zugdev]

Looks good! Not sure about hard-coded colors tho, @0x4007 RFC

[ubiquity-os]

@dawidsawa, this task has been idle for a while. Please provide an update.