reactjs / reactjs/react.dev

Code sample results take too much space on narrow screens

Open
#6,269 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

When I open the docs on narrow screen (Full HD in vertical mode), the containers for code results are too tall (mostly empty).

Example (https://react.dev/learn/reusing-logic-with-custom-hooks):

react dev_learn_reusing-logic-with-custom-hooks (1)

Note that Show less/Show more button will not fix it (it will only affect the size of code box).

Tested in:
Chrome 116.0.5845.110 (Official Build) (64-bit) on Ubuntu 20.04.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the example page at https://react.dev/learn/reusing-logic-with-custom-hooks in a narrow, vertically oriented viewport and inspect the code-result containers. The work is done when those containers no longer leave excessive empty vertical space; the Show less/Show control should not be used as the fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.