preactjs / preactjs/preact-devtools

Component tree and Prop display width not adjustable

Open
#483 1 comment 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
345
Forks
39
PR merge metrics
No merged PRs in 30d

Description

With the devtools open and Preact brought up, the tree/props pane can't be adjusted for width/horizontally - for instance making the props pane the wider of the two.

In general I find the props pane to require more space on the screen to display all of the information, especially when working with large or nested state objects.

I see that the corresponding react-devtools the component tree and props pane's vertical divider are adjustable. I find this an essential element to parsing through the app's state.

I haven't yet explored the actual codebase, but I understand there are scenarios where the styling couldn't easily support a mouse-drag adjustment. If that is the case, perhaps a simple setting would suffice. Something like a 'Tree:Props display ratio'.

Thank you so much for the wonderful tool - I use it everyday at work for NOAA. Many of our apps and tools are built with Preact, in case you did not know! Currently porting the ENOW Explorer from old Angular to a modern Preact with useContext/useReducer setup.

Ashley Thomas

Contributor guide

No contributing guide indexed for this repository

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

No files or tests are named. Start by locating the TypeScript UI entry points for the component tree, props pane, and their vertical divider, then inspect how the panes are laid out. Done means the tree and props widths can be adjusted while the devtools are open, with the proposed ratio setting considered if dragging is not practical; verify this in a Preact application.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.