Incorrect scroll bar location in the new Obsidian Editor

[WeberAlex]

When I use the Yin-and-Yang-Theme with the new Editor, the scroll bar in edit mode has moved far off the right edge of the window.

I tested the Original Theme and the Atom Theme with the new Editor. They both display the scrollbar at the right of the windows regardless of the editor (i.e. the new editor or the legacy editor) when I am in editing mode.

Could you update the Yin-and-Yang-Theme to reposition the scroll bar location in editing mode. Thank you.

Yin-and-Yang-Theme (legacy editor)

When I select editing mode, the scroll bar is at the right of the window

Yin-and-Yang Theme (new editor)

When I select editing mode, the scroll bar is moved far off the right of the window

[chetachiezikeuzor]

That's very strange! I'm planning on releasing an update to accommodate the new editor but I don't seem to have this problem with it. Do you have readable line width toggle on by any chance?

[WeberAlex]

Hello chetachiezikeuzor, do you happen to have a Windows 10 version machine, or vm, to test it on?

I enclose my custom CSS file. I suspect some CSS values are conflicting with your theme. It could be a Windows problem only, since Windows font rendering is less than optimal (that's from my experience, when I compare with Mac or Linux).

Once again, I have tested two other themes with the same configuration without experiencing the right scroll bar moving while in edit mode (with the new editor).

Yes, readable line width is toggle on.

202110031512_obsidian - Copy.css.txt

Please remove the .txt extension. Github does not allow .css file upload. Thanks.

[WeberAlex]

This is not Windows only. I used Obsidian (the Android app) on a Chromebook, and I can reproduce the same artifact. Maybe this is because of my font size setting (this Chromebook has a high res display that makes everything look small, and my visual acuity is not good). My font size setting is 19 pt on the Obsidian desktop, and 23 pt on Obsidian Android.

I enclose 2 screenshots of Obsidian on my Chromebook.

Chrome OS/Android Obsidian Yin-Yang theme

Chrome OS/Android Obsidian Atom Theme

[chetachiezikeuzor]

Ok! Yes I do have a Windows 10 device to test on so I will do this later today. Just to confirm, what happens when you turn off readable-line length? Or change the readable line length value in Style Settings? Thank you!

[WeberAlex]

Readable-line length on/off makes no difference since I only encounter the issue in edit mode (not in view mode).

It has nothing to do with my font size setting or my CSS edits (yippee). I created a new vault (with default settings) and I installed your theme. I could reproduce the issue 100% of the time. This should help narrow down the problem.

I am having this issue on Windows when I use the Live Preview (only), and on Android. I cannot reproduce it when I use another theme.

1. Full screen of a default vault with Yin and Yang + Live Preview (left panel is collapsed)

2. Full screen of a default vault with Yin and Yang + Live Preview (left panel is open)

3. Full screen of a default vault with Blue Topaz + Live Preview (left panel is collapsed)

4. Full screen of a default vault with Blue Topaz + Live Preview (left panel is open)

PS: Nice to know you. Your theme was featured in a bog post by Nicole van der Hoeven and it gives a little féminin note to Obsidian. I like using it.

[alfariiizi]

Hai @WeberAlex!

Do you've installed "Style Settings" plugin? If you have, open Settings > Plugin Options > Style Settings > Yin and Yang Theme > Typography. In the Typography section, there's called Readable Line Width. Change the value to 100.

It works for me. Sorry for my bad English.

[WeberAlex]

@alfariiizi

Thanks for suggestion. I did try the plugin with the theme in a new vault. Unfortunately it does not solve the problem.

[Coliinnn]

Strangely (but fortunately), changing the Readable Line Width to 100 (from 47) does work for me to fix this issue. This is whilst Legacy editor is disabled and live preview is turned on. Thank you for the suggestion @alfariiizi!

[bhoken94]

Hai @WeberAlex!

Do you've installed "Style Settings" plugin? If you have, open Settings > Plugin Options > Style Settings > Yin and Yang Theme > Typography. In the Typography section, there's called Readable Line Width. Change the value to 100.

It works for me. Sorry for my bad English.

Thank you very much, works also for me!

[victorBaro]

Moving to 100 works "temporarily". It breaks after window resizing or other navigation is performed

[ChriiMoral]

Moving the Style Settings "Readable Line Width" to 100% works...ish. The scroll bar is not exactly at the very right of the window.

There's a secondary effect: When toggling preview mode, the text covers the entirety of the screen (even though the Editor setting's toggle "Readable line length" is also activated).

The YinYan's "Readable Line Width" does reduce the amount of horizontal space covered by the Preview Mode... but then the scroll bar is misplaced. Scroll Bar location when "Readable Line Width" is set to 100.

Preview Mode behaviour when "Readable Line Width" is set to 100.

For some reason, the scroll bar doesn't want to align with the rightmost edge of the window like with other themes (see @chetachiezikeuzor's comment, the issue is present there too).

That's very strange! I'm planning on releasing an update to accommodate the new editor but I don't seem to have this problem with it. Do you have readable line width toggle on by any chance?

I hope this provides more information to help solve the issue. Specs: Edition: Windows 11 Pro Version: 21H2 OS build: 22000.856 on a Surface Book 2.