backstage / backstage/community-plugins

๐Ÿ› shortcuts: Shortcuts displayed in sidebar with its own hidden scrollbar

Open
#4,841 10 comments 0 reactions 0 assignees View on GitHub
bug good first issue help wanted workspace/shortcuts
Dominant language
TypeScript
Stars
422
Forks
697
Avg merge
2d 6h
Merged PRs (30d)
286

Description

### Workspace

shortcuts

### ๐Ÿ“œ Description

When the sidebar contains enough items or the device window is small enough, shortcuts in the sidebar get displayed in a section with its own hidden scrollbar, rather than being part of the general sidebar scrollbar. This makes the shortcuts terribly hard to find. Hopefully there is a simple CSS fix. I can get the desired behavior by simply disabling the CSS rule `flex: 0 1 auto;` on the div surrounding shortcuts via Browser's dev tools.

### ๐Ÿ‘ Expected behavior

This is how I would like it to look, by disabling the flex CSS property:
Image

### ๐Ÿ‘Ž Actual Behavior with Screenshots

Here is what my sidebar looks like on my 14" Mac. Notice only the button to add more shortcuts is visible:
Image

Here I have used the hidden inner scroll to find my shortcuts:
Image

### ๐Ÿ‘Ÿ Reproduction steps

Make the window small enough (or zoom into page) .

### ๐Ÿ“ƒ Provide the context for the Bug.

_No response_

### ๐Ÿ‘€ Have you spent some time to check if this bug has been raised before?

- [x] I checked and didn't find similar issue

### ๐Ÿข Have you read the Code of Conduct?

- [x] I have read the [Code of Conduct](https://github.com/backstage/community-plugins/blob/main/CODE_OF_CONDUCT.md)

### Are you willing to submit PR?

No, I don't have time to work on this right now

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.