Text is wrapping at different points than what GitHub shows

[nickjj]

Hi,

I've maximized the preview panel as wide as possible to ensure it has maximum viewing width but I'm still finding a lot of cases where wraps are happening at different points with your extension. This is at 1:1 scaling on Windows 10 using VSCode 1.29.0-insider.

Here's 2 examples:

https://github.com/nickjj/ansible-docker/tree/v1.3.0#example-usage

Take a look at this snippet of text from the above repo:

Here's a few examples. You can recreate this example on your end by opening or creating group_vars/app.yml which is located relative to your inventory directory and then making it look like this:

With your extension, it wraps after "which is" and then "located relative" is on a new line, but on GitHub the "located" is still on the previous line.

https://github.com/nickjj/ansible-docker/tree/v1.3.0#trying-to-figure-out-how-to-downgrade-docker

Here's another snippet:

If you want to downgrade Docker, the easiest way to do it would be to uninstall the Docker package manually and then run this role afterwards while pinning whatever specific Docker version you want.

With your extension, it wraps after "and then run" and then "this role afterwards" is on a new line, but on GitHub the "this" is still on the previous line.

Does the entire preview render area need to be increased by a few pixels?

[nickjj]

Wish I could help on this one.

The width set in the dependency you use is 980px which is still the same as the current github width.

I think to begin with, are you able to reproduce the abnormal wrapping on MacOS @mjbvz? Or if you're on Windows too, does it wrap for you as well?

[xt0rted]

This happens on Windows too. The issue looks to be a result of the container padding being set to 45px while the website uses 40px.

https://github.com/mjbvz/vscode-github-markdown-preview-style/blob/292c1f3b1877f1f64b6a85d66b69f790bc3cd59b/base.css#L10

If you pull up dev tools on your example document and adjust the left/right padding of the container element the text will wrap just like it does in VS Code.

[mjbvz]

I'll check in a fix the makes the content itself exactly 898px wide, as on github. This will get us to:

[mjbvz]

Here's what I see on github with Chrome on MacOS btw:

[nickjj]

It looks like it wraps differently on MacOS Chrome.

This is Windows 10 Chrome stable at 1920x1080 with 100% scaling on github:

[fharper]

It would be amazing if fixed in this extension as using "markdown.styles to do the customization myself is a PITA with multi-root workspace as I would need to have the CSS files in all folders. AFAIK, it's just missing the 898px with + auto margins for .github-markdown-body.