Code not centered properly in cell

[m2-farzan]

After 8ca68cc, the code in cells is not centered properly.

before 8ca68cc:

after 8ca68cc:

Repro steps:

• Open a notebook.
• Click to edit a code cell.

I have observed this in Chromium & Firefox.

Edit:

Things get worse when writing multi-line code.

[kevin-bates]

Sigh, yep, I'm seeing the same thing. Thank you for bringing this to our attention @m2-farzan. Looks like this comment was telling: #5616 (comment)

I've built with 5.53.2 and this issue doesn't occur. We should move to that instead if @akdor1154 and @blink1073 agree.

@akdor1154 - could you please build with 5.53.2 and ensure the IJulia issue for #5615 is resolved?

[m2-farzan]

I observed that the problem is probably related to codemirror/codemirror5@632f30b so I looked up at ~/.virtualenvs/master-test/lib/python3.8/site-packages/notebook/static/components/codemirror/lib/codemirror.css and I noticed that the file had not been updated. So I manually applied codemirror/codemirror5@632f30b to it and hard-reloaded the page. The problem was gone.

Now I'm wondering why it didn't automatically get updated. I suspected that maybe it's just my cache, so I cleared ~/.cache/bower and retried, but it didn't work. Any ideas?

[kevin-bates]

Thanks for the update. I'm not a front-end dev - so have no idea. I'm sure others will know.

So based on that, it sounds like 5.55.0 might be okay unless we cannot resolve the css update snafu.

[blink1073]

I'd say let's try the new 5.56.0 that has that fix. This is a good reason to have snapshot testing in general 😄

[akdor1154]

I think the issue is that something has gone wrong packaging the codemirror bower package - lib/codemirror.css in the components/codemirror repo is out of date in the relevant tags. See components/codemirror#3 . If this is fixed then by my understanding 5.55.0 should be fine in theory (as the issue comes from mismatch of CM css+js). OTOH I'm always supportive of keeping deps up to date so .56 is fine too. Let's see how codemirror tackles releasing a fix for this.

Codemirror advice is "use npm" btw, not sure if Notebook could consider doing that.

[kevin-bates]

I see the same behavior with 5.56. This may be a rehash of the css stuff you're talking about above (and, if so, I apologize), but this appears to be an issue with the vertical scroll bar on the cell. When the cell is created, the scroll bar is positioned at the top, but when the focus enters the cell, you'll see the scroll bar move down slightly, causing the content to be vertically uncentered. Re-positioning the scroll bar to the top, centers the content again. It looks like the vertical scroll bar was created sometime after 5.53.2 since it doesn't have one.

[blink1073]

JupyterLab 2.2.x is using 5.53.2

[kevin-bates]

@akdor1154 - does your IJulia issue referenced in #5615 occur on Jupyter Lab? Since they're using codemirror 5.32.2, that could be a solution here as well.

[kevin-bates]

Nevermind @akdor1154 - backtracking a bit more, I found this #5469 (comment).

This implies we need >= 5.55 but we'll need to resolve the scrollbar issue - that is not evident in Jlab (as @blink1073 has confirmed).

I'll have to defer to someone with frontend dev experience here - sorry.

Once this issue is resolved, I'll cut 6.1.0 - so there's the carrot. 😄

[akdor1154]

I got components/codemirror to publish fixed releases, Jupyter should be able to depend on 5.56.0+components1 to fix the scrollbar issue. Future CM releases should be back to normal (e.g. just 5.57.0).

[kevin-bates]

Wow - thank you! Okay - that seems reasonable. Is there any timeframe for 5.57's availability? If really soon, but we could stall a day or two, but I'm okay producing a 6.1.1 for that if it's more than a couple days out.

[akdor1154]

Is there any timeframe for 5.57's availability?

Not as far as I'm aware, it's up to Codemirror upstream I guess.