vuejs / vuejs/devtools

Issue Report: Scrollable Sidebar Not Functioning as Expected

Open
#350 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

client question usage
Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

Description:

Upon testing the scrollable sidebar functionality on the localhost:5173 test page, the expected behavior was not observed. Despite attempting various actions such as checking and unchecking the checkbox option in settings, the sidebar tabs remained unscrollable. Additionally, neither did the tabs transition into the popover menu of the floating panel, nor did the "more" button appear. The sidebar remained unresponsive to changes in the "Scrollable sidebar" option value in the settings menu.

Steps to Reproduce:

  1. Navigate to the localhost:5173 test page.
  2. Attempt to interact with the sidebar tabs, including checking and unchecking the checkbox option.
  3. Observe that the sidebar tabs do not become scrollable as expected.
  4. Click the "more" button to access additional tabs if it appears. However, no additional tabs are displayed, and items in the list do not transition into the popover menu of the floating panel.

Expected Behavior:

a) The sidebar tabs should become scrollable when the content exceeds the available space.
b) Clicking the "more" button should reveal additional tabs within the popover menu of the floating panel.
c) This process should happen automatically when the checkbox is checked.

The described behavior worked initially but stopped functioning after changing the UI scale to "Huge."

Expected Behavior

Observed Behavior:

  • The sidebar tabs remain unscrollable regardless of the content length.
  • Clicking the "more" button does not display additional tabs within the popover menu.

Attempts to Resolve:

  • Checked and unchecked the checkbox option in the settings.
  • Manually adjusted the height and width of the VueDevtools 7 panel.

Additional Information:

  • Environment: localhost:5173 test page
  • Browser: Microsoft Edge latest stable version
  • Vue DevTools: v7.0.27

Screenshots/Video:

Observed Behavior

Priority:

Unknown

Assigned To:

Unknown

Deadline:

Unknown

Notes:
Please address this issue in upcoming versions. Feel free to use this issue text style as a template for reporting.

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

Start by reproducing the sidebar behavior on the localhost:5173 test page with the UI scale set to “Huge,” then compare the checked and unchecked “Scrollable sidebar” states. Verify that overflowing tabs scroll, the “more” button appears, and additional tabs open in the floating-panel popover.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.