positioning of built in slide editor wrong

[gureckis]

Describe the bug When opening the slide editor in Safari 17.4.1 (Sonoma 14.41) and also Chrome (124.0.6367.119) the slide editor spacing and alignment is off. When it is in "sidebar mode" it actually appears below the slide.

When it is in "dock to bottom" mode, it doesn't actually go down to the bottom but sort of hang with a lot of white space below.

In the first case it should just go to the right side of the window. In the second case it should probably align to margin-bottom: 0; and either fill all the space or give more room to the slide letter boxing.

To Reproduce Steps to reproduce the behavior:

1. open the slide deck
2. click the "Show editor" menu item
3. Toggle either "Dock to right" or "Dock to bottom"

Desktop (please complete the following information):

• OS:Sonoma 14.41
• Browser:Safari 17.4.1/Chrome (124.0.6367.119)
• Slidev version:v0.49.0-beta.6

[kermanx]

Thanks for your report. I've noticed this strange behavior before, but I can't reproduce this now. Could you share the data in the local storage (con be found in the "application" panel in Chrome DevTools) when the bug happens?

[gureckis]

Sure here is an example:

I had one strange situation where it was messed up in Safari and I opened Chrome to the same URL and suddenly everything snapped into place in both browsers. I can't understand how that could happen and maybe I'm going crazy (can't repeat it) but thought to mention.

[kermanx]

I had one strange situation where it was messed up in Safari and I opened Chrome to the same URL and suddenly everything snapped into place in both browsers. I can't understand how that could happen and maybe I'm going crazy (can't repeat it) but thought to mention.

Thanks for your information! According to this, I can remember something now. IIRC, this issue is because some UnoCSS classes are missing.😢

[gureckis]

Actually just replicated it. First, I opened the editor in Safari and it displays wrong. Next, I opened chrome pointing it at the same localhost URL (http://localhost:3030/). Suddenly the Safari editor snapped into place in the background. Perhaps the CodeMirror editor rewrites something on the server side when it connects to chrome?

[kermanx]

Actually just replicated it. First, I opened the editor in Safari and it displays wrong. Next, I opened chrome pointing it at the same localhost URL (http://localhost:3030). Suddenly the Safari editor snapped into place in the background. Perhaps the CodeMirror editor rewrites something on the server side when it connects to chrome?

If the UnoCSS class controls the grid layout is not loaded, the editor will be in the wrong place. And after the page is opened in another browser, somehow the UnoCSS class is loaded in the server, and the old page can also receive the class.

[gureckis]

interestingly doesn't appear to be a problem on Arc browser (1.41.0).

UPDATE: I was wrong it affects ARC too, oddly intermittently. However I found a reliable fix:

• If in ARC, I choose "clear Cookies and refresh" the tool bar goes back to working correctly.
• Then if I stop and and start the Vite process (npx) and reload then the page goes back to broken.
• If I choose "clear cookies and refresh" it goes back to working.

There doesn't appear to be any cookies set by the program so I believe this is resetting local storage. I checked the values in local storage and they don't seem to be changed by resetting. So I think it is something like "if there is local storage already set at the time the Vite process launches then there is an error in rendering, if local storage is cleared/doesn't exist then the page loads correctly"

[kermanx]

I saw this strange behavior happening multiple times later. I can confirm that this is caused by UnoCSS classes grid-cols-[1fr_max-content] not getting its CSS generated:

https://github.com/slidevjs/slidev/blob/1142d8311357c2e4794b41cd4b7756a587b45f8b/packages/client/pages/play.vue#L47

However, I can't reproduce this in a stable way. @antfu, what do you think may cause the class name not to be processed by UnoCSS?

[gureckis]

I was able to fix this in my theme by adding that class to unocss's safelist: https://github.com/gureckis/slidev-theme-neversink/blob/41738acad5cbd4274fbc4cf90c8e498132cf554b/uno.config.ts#L199. perhaps not pretty but works.