File previews broken due to lack of respect for user's tab-size

[Lamparter]

Description

On XML based languages, Refined GitHub renders the code in weird ways:
Seemingly, it puts in more spacing than is usual, so there is a remain of the code in it's 'usual' state.
Not so sure about this one.

📝 Note that this only occurs when selecting text.

Second of all, the text selector can only go to the end of the 'original' black text and not of the white one, so I cannot visually select the whole text.

I have a video of this, but could not upload it to GitHub.

See:
https://riversidevalley-my.sharepoint.com/:v:/g/personal/lamparter_theriversi_de/EdcPsBJFcslMlVmICHSqgK0B_k0xd72Ep1hu9Tk35qFZoA?e=Dieyoo
This video is of https://github.com/files-community/Website/blob/cfcfa9098860261e4433eecc77ae80b2c0e8d281/src/i18n/locales/en-US.json

How to replicate the issue + URL

Seemingly occurs in HTML/XML based languages, such as Svelte, XAML and of course, HTML, as well as JSON (a lot of web languages! but not Ruby); I have used the Refined GitHub feature identifier and it did not identify the problem, however disabling the Refined GitHub extension does fix the problem.

Example: https://github.com/RiversideValley/Website/blob/main/src/app.html

Extension version

23.3.31

Browser(s) used

Microsoft Edge Insider Dev

[fregante]

This is likely a combination of:

• GitHub is playing with a hidden/duplicate element first mentioned here
• your tab size is set to 8 characters
• our tab-size affects only the hidden element

As a temporary fix:

• you can change your tab size to 4 characters

[fregante]

cc @kidonng

[fregante]

I can replicate the issue because my tab size is also not 4 characters and I have the new hidden element.

I'll push a hotfix

[fregante]

Hotfixed, no further action required on your part, just wait a few hours

[kidonng]

Caused by

refined-github/source/features/tab-size.css

Lines 3 to 5 in 154c0f8

	* {
	tab-size: var(--tab-size) !important;
	}

overriding

<textarea
	id="read-only-cursor-text-area"
	style="tab-size: <what-you-set-in-your-preference>"
>

* is probably too wide. Just use more specific selector?

Also this is annoying:

[fregante]

Just use more specific selector?

Yeah back then we kept this to cover any situations that GitHub forgot:

• Default to 4 characters where tab-size isn't set #5715

It seems that they still haven't been fixed. Maybe the new selector is just .markdown-body pre but we need to re-verify if anything else is needed here: https://github.com/refined-github/refined-github/blob/main/source/features/tab-size.css

Some code is also needed to preserve show-whitespace

[fregante]

It seems that this was reported yesterday but I closed it as unreproducible:

• tab-size broken in new code view #6461

[kidonng]

We only really care tabs in two places:

• Code view (natively supported, both on main site and Gist)
• User content (.markdown-body)

Oh, maybe action logs?

[fregante]

• User content (.markdown-body)

I think yeah let's target this, like suggested in my previous comment.

Oh, maybe action logs?

Would be ideal, but I don’t think it's common to print tabs in the console and especially not expecting them to be 8 characters, so probably it's best to not touch that.

[Lamparter]

Thanks!