Cell contents overlap toolbar at narrow width

[kulsoomzahra]

#13059 PR fixes :

Preserves the horizontal layout of the cell toolbar at 400% zoom

What it doesn't fix:

If the contents of the cell overlap with that of the toolbar, like:

Steps to reproduce

• Apply PR Fix cell toolbar layout #13059.
• Open JupyterLab.
• Open a notebook that has code cells in it.
• Squeeze the width of the browser window until it’s below 760 px (the breakpoint)
• The contents of cell will overlap with the cell toolbar
  (Previously, before PR Fix cell toolbar layout #13059, following the above steps led to the cell toolbar running vertically down the cell.)

Proposed Solution

A possible solution to this issue might be:

• Giving a solid background to the toolbar with/without borders
• Offsetting/pushing the toolbar up
• Adding more white space between cells

(similar to what Google Colab does)

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[firai]

A couple of other proposed solutions to this issue, which I think applies for both regular zoom and increased zoom: #12223

[krassowski]

Another edge case is the collapsed cells; since I think that it is a bug (cell toolbar gets hidden for non-collapsed cells, but not for collapsed cells) I opened: #13254

[krassowski]

@JasonWeill do you suggest that we should pause with review of #13896 until we release 4.1?

[andrii-i]

@krassowski @JasonWeill PR #13896 solves issue #12523 so I would recommend to either close both PR and an issue or continue review of a PR (then continue work on cell toolbar mobile experience within this issue)