CSS issue when the Notebook windowing mode is set to full

[jtpio]

Testing on the latest main, which includes the recent changes that landed in JupyterLab w.r.t windowing mode, it looks like the CSS is off:

This is likely related to an underlying DOM structure change, which affects the CSS customizations in Notebook.

[jtpio]

Adding to 7.1.x since full is not the default windowing mode.

[jtpio]

Marking as a "good first issue" if someone would like to have a look:

The windowing mode can be set to full via the settings editor:

This will also likely require tweaking some CSS depending on the DOM structure: https://github.com/jupyter/notebook/blob/main/packages/notebook-extension/style/base.css

[kgaurav8026]

Hi @jtpio,
I’m interested in contributing to JupyterLab, and I’d like some additional context regarding the issue related to cell alignment. From what I understand, the issue pertains to the misalignment of the cell box when windowing. Specifically, should the cell box be centered on the screen?

[jtpio]

Yes it should be centered like when using the default mode:

[v-lozko]

Hello, would it be possible to have this assigned to me?

Thanks

[kgaurav8026]

Hello, would it be possible to have this assigned to me?

Thanks

I'm also working to resolve the issue. If you find a solution, you can submit a PR I guess. Assigning it won't be beneficial.

[v-lozko]

It will be so efforts arent duplicated, so work on it. if you can't/dont have time let me know and i can take a stab at it

[kgaurav8026]

It will be so efforts arent duplicated, so work on it. if you can't/dont have time let me know and i can take a stab at it

Ok sure. I will let you know if I'm not able to complete it. I'm currently halfway there

[kgaurav8026]

Hi @v-lozko , i am finding it difficult to fix the bug. So you can start working on it if you want.
Thanks

[kgaurav8026]

@v-lozko Also, if you are able to merge Kindly tell me the approach as i am keen on understanding how to tackle such issues in the future.

[v-lozko]

Hello @jtpio i can't seem to replicate the issue. This is the first issue i'm dealing with in Jupyter, but it definitely seems like i set up the environment correctly, and having changed my settings to full i do not have the CSS issue that you shared. it looks fine.

[jtpio]

I just tried from the latest commit (851a4be) and it still seems to be an issue:

[v-lozko]

huh, i have windowing set to full

and here is what i'm seeing

[jtpio]

Did you refresh the notebook page after changing the setting?

[v-lozko]

yes, and i've tried reinstalling the build multiple times. i see you're using gitpod based on your url, could that be a possible source of the issue?

[jtpio]

Here is a screencast to reproduce the issue, testing on Binder with Notebook 7.1.2 from this gist: https://gist.github.com/jtpio/d368ab89cee5123ecee60683115e15f3

notebook-full-windowing-mode.webm

you're using gitpod based on your url, could that be a possible source of the issue?

This was tested in a fresh new environment on Gitpod, so not sure this is the reason. And it is also reproducible on Binder (which also creates a clean new environment).

[v-lozko]

So i went out, got a new macbook as i was previously using a windows, set everything up and this time tried it both with chrome and safari as well as binder. i get the issue with safari and binder, but i am not able to repeat it on chrome. so at least this gives me a place to start

[jtpio]

Thanks @v-lozko for looking into this.

I also checked on Chromium (on Ubuntu) and it also seems to be the case:

[v-lozko]

Thanks for your patience as well, I have been a bit busy these past couple days but had a chance to look into a little. I'm not certain its the DOM, as it seems the right margin for the windowed panel is being overridden by a style attribute coming from somewhere (which surprisingly isn't happening with chrome). I'll get it sorted in next day or so, someone much better versed in CSS will help me sort it out.

[Dev-Akash]

Hi @v-lozko , I hope I can help on the CSS part in this issue, if there is a room for contribution please let me know.
Thank you!

[v-lozko]

Hey @Dev-Akash, I have put some time in already trying to resolve this and would like to see it through in next day or so. If I can't figure it out I can definitely let you know! I appreciate the offer

[Dev-Akash]

Sure! @v-lozko.
Thank you!

[v-lozko]

@jtpio i submitted a PR here for this issue however i forgot to appropriately label it so its not tied to this issue. Is there a way to edit the labels post submittal of the PR?

[tentomush1]

Is the issue solved yet? what is the progress?

[felixmachaoran]

This problem seems still happening in notebook version 7.2.2

[jtpio]

@felixmachaoran would you be able to provide a screenshot of the issue? Thanks!

[felixmachaoran]

Here is the screenshot happen on the version 7.2.2

[jtpio]

Thanks @felixmachaoran.

Wondering if this might be a browser caching issue. Would you be able to clear your browser cache and reload the page, to double check?

[felixmachaoran]

When I downgrade to version 7.1.2, this issue disappeared, once I upgrade to 7.2.2, it happens again

[jtpio]

OK, and if you try to clear the cache entirely? Or try in a different web browser?

[felixmachaoran]

Sorry, after clear the browser cache, the issue seems solved, thank you for your help

[jtpio]

OK good to hear, thanks for checking!