Fix width and margins of the notebook footer.

[HaudinFlorence]

This PR fixes the width and the margins of the notebook footer.

References

This PR should fix issue #16380

Code changes

The proposes changes only concerns the style of the notebook footer and are in packages/notebook/style/notebookfooter.css

User-facing changes

Backwards-incompatible changes

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[HaudinFlorence]

bot please update snapshots

[github-actions]

Documentation snapshots updated.

[krassowski]

What is the rationale for the change to 0.8px border?

[HaudinFlorence]

@krassowski Thanks for the review. I will revert this change. If I am not mistaking, I tried to fit the style of the notebook cell border I saw in the dev tools.

[krassowski]

These snapshot changes appear unrelated and are causing the tests to fail I think:

Notice:   3 failed
    [documentation] › test/documentation/general.test.ts:618:7 › General › Command Palette ─────────
    [documentation] › test/documentation/internationalization.test.ts:14:7 › Internationalization › Menu 
    [documentation] › test/documentation/internationalization.test.ts:28:7 › Internationalization › Confirm language 

[HaudinFlorence]

Do you mean that I should take back the snapshots from the main branch ?

[krassowski]

Yes, I think that after that these tests should pass. If not, then we need to investigate (it looks like maybe different runners get different variants of Chinese fonts?)

[krassowski]

Thank you for working on a fix! It looks good in the (now default) full windowing mode:

but in the none mode it seems that the spacing is too much:

[HaudinFlorence]

Thank you for working on a fix! It looks good in the (now default) full windowing mode:

but in the none mode it seems that the spacing is too much:

Ok I was not aware of the none mode. I will try to fix that.

[HaudinFlorence]

Thank you for working on a fix! It looks good in the (now default) full windowing mode:

but in the none mode it seems that the spacing is too much:

Ok I was not aware of the none mode. I will try to fix that.

After thinking a little bit about it, I don't know how to set different margin for the windowing mode and for the none mode.

[krassowski]

@HaudinFlorence can you test the changes I pushed?

[HaudinFlorence]

@HaudinFlorence can you test the changes I pushed?

@krassowski Thanks for working on this PR. In the none mode, the width and left margin are ok but the footer remains at its initial position when adding new cells:

Screencast.from.05-06-2024.17.26.31.webm

Note also that in both modes, the top margin of the footer is slightly too large

[krassowski]

Thank you for this recording! I saw this happen earlier on CI (#14385); I now realise what is happening - the button is positioned below the spacer jp-WindowedPanel-inner element, which has either:

• managed height when full windowing mode is active
• unset height when defer or none is used

I did not see the issue you pointer out in testing because I was reloading JupyterLab or opening a new notebook after changing settings. I think that you did not reload JupyterLab after the change and this revealed a bug in that the previously set height of jp-WindowedPanel-inner remained set after switching to none but it was no longer managed so it stuck on an incorrect value.

This should be fixed by aafff6e.

Note also that in both modes, the top margin of the footer is slightly too large

They seem fine to me. If there was any margin added explicitly I would accommodate your suggestion by reducing it, but since there is no explicit margin-top anymore I think maybe we can leave it as is?

[krassowski]

@meeseeksdev please backport to 4.2.x

[HaudinFlorence]

Thank you for this recording! I saw this happen earlier on CI (#14385); I now realise what is happening - the button is positioned below the spacer jp-WindowedPanel-inner element, which has either:

• managed height when full windowing mode is active
• unset height when defer or none is used

I did not see the issue you pointer out in testing because I was reloading JupyterLab or opening a new notebook after changing settings. I think that you did not reload JupyterLab after the change and this revealed a bug in that the previously set height of jp-WindowedPanel-inner remained set after switching to none but it was no longer managed so it stuck on an incorrect value.

This should be fixed by aafff6e.

Note also that in both modes, the top margin of the footer is slightly too large

They seem fine to me. If there was any margin added explicitly I would accommodate your suggestion by reducing it, but since there is no explicit margin-top anymore I think maybe we can leave it as is?

@krassowski Thanks for fixing the bug and completed this PR. We can keep the gap as it is now

[krassowski]

FYI I opened two follow-up issues for edge cases:

• "Click to add a cell" is not expanded to the full cell width on small screens #16491
• "Click to add a cell" covers the cell in "Render Side-by-Side" mode #16492