Redundant Horizontal Scroll Bar in Command Palette

[pingshunhuangalex]

Me again. Possible horizontal scroll bar issue in Atom Command Palette

Reproduction Steps:

1. Update to Material UI 2.0
2. Fire up Atom command palette
3. There is an unnecessary horizontal scroll bar there

Expected behavior:

There shouldn't be any horizontal scroll bar there. The content should be bound within the palette

Observed behavior:

There is some blank space at the end of the ordered list which triggers the overflow, hence showing the horizontal scroll bar.

Screenshots and GIFs

Atom version: Atom 1.17.0-beta4 OS and version: Windows 10 64-bit

Installed packages:

Built-in Atom Packages (90)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.0
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.10.3
├── one-light-ui@1.10.3
├── one-dark-syntax@1.7.1
├── one-light-syntax@1.7.1
├── solarized-dark-syntax@1.1.2
├── solarized-light-syntax@1.1.2
├── about@1.7.6
├── archive-view@0.63.2
├── autocomplete-atom-api@0.10.1
├── autocomplete-css@0.16.1
├── autocomplete-html@0.7.3
├── autocomplete-plus@2.35.3
├── autocomplete-snippets@1.11.0
├── autoflow@0.29.0
├── autosave@0.24.2
├── background-tips@0.27.0
├── bookmarks@0.44.3
├── bracket-matcher@0.85.5
├── command-palette@0.40.4
├── dalek@0.2.1
├── deprecation-cop@0.56.7
├── dev-live-reload@0.47.1
├── encoding-selector@0.23.3
├── exception-reporting@0.41.3
├── find-and-replace@0.207.5
├── fuzzy-finder@1.5.4
├── git-diff@1.3.5
├── go-to-line@0.32.0
├── grammar-selector@0.49.4
├── image-view@0.61.2
├── incompatible-packages@0.27.2
├── keybinding-resolver@0.38.0
├── line-ending-selector@0.6.3
├── link@0.31.3
├── markdown-preview@0.159.11
├── metrics@1.2.2
├── notifications@0.67.1
├── open-on-github@1.2.1
├── package-generator@1.1.1
├── settings-view@0.249.4
├── snippets@1.1.4
├── spell-check@0.71.4
├── status-bar@1.8.7
├── styleguide@0.49.6
├── symbols-view@0.115.5
├── tabs@0.105.4
├── timecop@0.36.0
├── tree-view@0.217.0-5
├── update-package-dependencies@0.11.0
├── welcome@0.36.2
├── whitespace@0.36.2
├── wrap-guide@0.40.1
├── language-c@0.57.0
├── language-clojure@0.22.2
├── language-coffee-script@0.48.6
├── language-csharp@0.14.2
├── language-css@0.42.2
├── language-gfm@0.88.1
├── language-git@0.19.0
├── language-go@0.43.1
├── language-html@0.47.2
├── language-hyperlink@0.16.1
├── language-java@0.27.0
├── language-javascript@0.126.1
├── language-json@0.19.0
├── language-less@0.32.0
├── language-make@0.22.3
├── language-mustache@0.13.1
├── language-objective-c@0.15.1
├── language-perl@0.37.0
├── language-php@0.38.0
├── language-property-list@0.9.1
├── language-python@0.45.2
├── language-ruby@0.71.0
├── language-ruby-on-rails@0.25.2
├── language-sass@0.59.0
├── language-shellscript@0.25.0
├── language-source@0.9.0
├── language-sql@0.25.4
├── language-text@0.7.2
├── language-todo@0.29.1
├── language-toml@0.18.1
├── language-xml@0.35.0
└── language-yaml@0.29.0

Community Packages (56) C:\Users\Pingshun Huang\.atom\packages
├── advanced-open-file@0.16.6
├── aligner@0.22.3
├── atom-beautify@0.29.23
├── atom-material-syntax-dark@0.2.7
├── atom-material-ui@2.0.2
├── atom-terminal@0.8.0
├── atom-ternjs@0.18.3
├── autocomplete-modules@1.6.9
├── autocomplete-paths@1.0.5
├── autocomplete-python@1.8.63
├── autoprefixer@3.6.1
├── busy-signal@1.4.1
├── color-picker@2.2.5
├── cursor-history@0.10.1
├── d3-snippets@1.0.0
├── django-atom@0.2.4
├── emmet@2.4.3
├── expand-region@0.2.7
├── file-icons@2.1.4
├── git-log@0.4.1
├── git-plus@7.8.0
├── git-time-machine@1.5.9
├── highlight-selected@0.13.1
├── Hydrogen@1.12.1
├── hyperclick@0.0.40
├── intentions@1.1.2
├── js-hyperclick@1.11.0
├── language-babel@2.58.0
├── language-vue@0.21.2
├── linter@2.1.4
├── linter-coffeelint@1.2.1
├── linter-eslint@8.1.7
├── linter-flake8@2.2.1
├── linter-jsonlint@1.3.0
├── linter-markdown@4.0.1
├── linter-stylelint@3.10.0
├── linter-ui-default@1.3.0
├── linter-xmllint@1.4.1
├── merge-conflicts@1.4.4
├── minimap@4.28.2
├── minimap-pigments@0.2.2
├── open-recent@5.0.0
├── pigments@0.39.1
├── postcss-sorting@2.10.0
├── project-manager@3.3.4
├── qolor@0.4.1
├── regex-railroad-diagram@0.17.0
├── relative-numbers@0.7.1
├── sass-autocompile@0.13.3
├── sort-lines@0.14.0
├── source-preview@0.5.0
├── split-diff@1.3.1
├── sync-settings@0.8.1
├── tree-view-git-status@1.3.1
├── vim-mode-plus@0.91.0
└── vue-hyperclick@0.2.0

[silvestreh]

Thanks! I'll try using always visible scrollbars.

[silvestreh]

I can't seem reproduce this 😕 …

I'll try installing some of your packages and see if one triggers this behavior. Went through each package and still can't reproduce.

[silvestreh]

@pingshunhuangalex isn't there an action in the command palette with a really long name causing it to overflow?

[silvestreh]

Finally managed to reproduce it! It's being caused by open-recent

Fix is coming! (though the package's author should take a look as well)

[silvestreh]

It's fixed now. I'll publish an updated package soon!

[pingshunhuangalex]

Thanks so much @silvestreh It seems a lot has happened while I was sleeping. Sorry for all these troubles cuz I didn't realise it was caused by long names or open recent as in my screenshot, commands are all short and sweet. Thanks again for going through all the troubles for me as I should be the one narrowing things down for you.

Thanks again and look forward to the updates.

[pingshunhuangalex]

Now it seems long text are now wrapped unnaturally somehow. (I know it looks all fine in your screenshot) I tried adding white-space: nowrap; to [data-event-name*="open-recent:"], but no luck. It seems the text are split into lots of span tags

If the cause is hard to locate, I can just uninstall open-recent. It's not an essential one anyway. Thanks.

[silvestreh]

Nono, no need to uninstall. I'll add white-space: nowrap; so you don't lose functionality!

[pingshunhuangalex]

Sorry @silvestreh I just modified my thread above. Adding white-space doesn't work. It must be something else that's triggering the issue

[silvestreh]

That's odd… I'll boot up my old Windows machine and see if I can reproduce this!

[pingshunhuangalex]

Hi @silvestreh I fixed the problem by changing the style you added in the previous update to:

li[data-event-name*="open-recent:"] {
    overflow: hidden;
    text-overflow: ellipsis;
}

If this also works in mac, feel free to apply. Thanks.