jupyter / jupyter/notebook

Display "Click to add a cell" button as a part of notebook, not background

Open
#7,565 2 comments 0 reactions 0 assignees Claimed by @aj202088 View on GitHub
enhancement tag:Design and UX
Dominant language
Jupyter Notebook
Stars
13.3k
Forks
5.8k
Avg merge
6d 11h
Merged PRs (30d)
7

Description

### Problem

Currently "Click to add a cell" is rendered as a part of background / outer notebook area (grey in the JupyterLab light theme) under the drop shadow from the notebook / inner notebook area (white in the JupyterLab light theme).

To me it seems that the way how button is rendered in JupyterLab, as a part of notebook / inner notebook area (white in the JupyterLab light theme) is easier to read / parse. As an added bonus, this would make design language used in lab and notebook more consistent.

Notebook:
Image

JupyterLab:
Image

### Proposed Solution

Render "Click to add a cell" button as a part of notebook / inner notebook area (white in the JupyterLab light theme).

In particular white space at the bottom of inner notebook area could be made larger to accommodate the button when hovering in a way that there would be no need to add / "pop-in" any artificial white space.

Image

Image

It would make sense to add the same amount of white space to at the top of the notebook for visual balance.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the proposed solution and the linked pull request #7587, then inspect the notebook rendering entry point used for the “Click to add a cell” button. Done means the button appears within the inner notebook area, with balanced top and bottom whitespace and no artificial pop-in space.

Written by the indexing model from the issue text.

Assessment

Tech stack
jupyter-notebook
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.