Flow type preview tooltip always shows one character only

[leonardfactory]

Issue and Steps to Reproduce

Flow type preview (the tooltip appearing on mouse over a Type, variable, etc.), doesn't resize based on type description length, while it keeps showing in a 1 character-wide box.

The issue started appearing when I upgraded to Atom 1.9.3.

Expected Behavior

The type preview tooltip should resize based on type description length.

Actual Behavior

The type preview tooltip always shows one character only.

Versions

• Atom: 1.9.4
• Nuclide: 0.159.0
• Client OS: OS X El Capitan 10.11.5

  Additional Details

• Installed packages (apm ls --installed):

├── Ensime@0.38.1
├── angularjs@0.3.5
├── ansi-to-utf8@0.4.0
├── atom-alignment@0.12.1
├── atom-autocomplete-php@0.18.9
├── atom-beautify@0.29.10
├── atom-bootstrap3@1.2.12
├── atom-ctags@4.5.2
├── atom-jasmine@0.8.1
├── autocomplete-ctags@0.4.1
├── autocomplete-flow@1.6.0
├── autocomplete-modules@1.6.0
├── autocomplete-paths@1.0.2
├── autocomplete-php@0.3.7
├── browser-plus@0.0.67
├── build@0.65.0
├── build-sbt@0.5.0
├── busy@0.6.0
├── chester-atom-syntax@0.1.1
├── coffee-navigator@0.0.18
├── coffee-refactor@0.7.0
├── coffeedocs@1.0.0
├── color-picker@2.2.2
├── docblockr@0.7.3
├── editorconfig@1.4.1
├── emmet
├── es6-javascript@1.0.0
├── file-icons@1.7.18
├── graphite-ui@0.15.1
├── gulp-snippets@0.6.2
├── haskell-grammar@0.4.0
├── highlight-selected@0.11.2
├── hyperclick@0.0.37
├── ide-flow@0.8.0
├── inline-autocomplete@1.1.0
├── intentions@1.0.5
├── js-autoimport@0.5.1
├── js-refactor@0.7.3
├── language-babel@2.32.2
├── language-batch@0.3.3
├── language-batchfile@0.4.0
├── language-bnf@1.1.0
├── language-coffee-script-angular@2.2.0
├── language-hocon@1.1.0
├── language-htaccess@0.1.1
├── language-ini@1.16.0
├── language-javascript-jsx@0.3.7
├── language-konfig@0.0.1
├── language-liquid@0.5.1
├── language-ocaml@1.1.2
├── language-scala@1.1.6
├── language-thrift@1.0.2
├── language-vb@0.1.0-pre1
├── laravel@0.7.0
├── line-ending-converter@1.3.2
├── linter@1.11.14
├── linter-clojure@1.1.2
├── linter-coffeelint@1.1.2
├── linter-eslint@7.2.4
├── linter-flow@5.4.0
├── linter-flow-plus@3.1.0
├── linter-jshint@2.1.0
├── linter-json-lint@0.1.1
├── linter-php@1.2.0
├── markdown-pdf@1.5.0
├── markdown-table-formatter@2.8.3
├── material-syntax@0.5.0
├── merge-conflicts@1.4.4
├── neutron-syntax@0.7.0
├── neutron-ui@0.4.0
├── nrepl@0.4.0
├── nuclide@0.159.0
├── php-debug@0.2.3
├── php-twig@4.0.0
├── refactor@0.9.2
├── save-session@0.16.0
├── sort-lines@0.14.0
├── spacegray-dark-neue-syntax@1.3.0
├── symbol-gen@1.3.1
├── todo-show@1.7.0
├── tool-bar@1.0.0
├── turbo-javascript@1.4.0
├── twilight-syntax@0.7.0
├── twilight-syntax-spacegray-ui@0.4.0
├── underscorejs-snippets@0.2.2
├── unity-dark-ui@2.0.9
├── unity-ui@2.1.5
└── webbox-color@0.5.9

[valscion]

I can verify this bug presence. My apm ls --installed is much smaller, though:

$ apm ls --installed
Community Packages (13) /Users/vesa/.atom/packages
├── atom-pair@2.0.10
├── atom-ternjs@0.14.2
├── editorconfig@1.4.1
├── git-plus@5.16.2
├── language-babel@2.32.2
├── language-haml@0.24.0
├── linter@1.11.14
├── linter-eslint@7.2.4
├── linter-rubocop@0.4.7
├── nuclide@0.159.0
├── project-manager@2.9.7
├── save-session@0.16.0
└── tablr@1.3.2

└── (empty)

Also was running on Atom 1.9.2 and updated to Atom 1.9.4, both had the same issue.

• Atom: 1.9.4
• Nuclide: 0.159.0
• Client OS: OS X El Capitan 10.11.6

I also have a Retina Macbook Pro and an external, non-retina display attached to it if it matters.

EDIT: I have the linter package disabled, but I could remove it, too.

EDIT2: Uninstalled, but still suffering from the same issue.

[valscion]

Here's some screenshots from debugging in inspector. Seems that the width doesn't expand after some element so that only a min-width that is set with selector .nuclide-type-hint-text-editor atom-text-editor is applied:

[valscion]

This is actually a duplicate of #542

[valscion]

With a bit hacking around in the inspector, I was able to determine that it is due to the container not resizing as the lines-tile-component in atom sets a position: absolute to the wrapped lines-component. I don't really know how Atom renders these lines and containers or how Nuclide renders type hints, but hopefully these can help you debug this further and even fix it?

I am able to "fix" this by dropping away the position: absolute from the wrapper component as shown in this screenshot:

[valscion]

Could this be because of Atom 1.9 and the new logic of rendering display layers or something? http://blog.atom.io/2016/08/01/atom-1-9-and-1-10-beta.html

[montogeek]

I have the same issue with Atom 1.9.0 and Nuclide 0.158.0

[bassettsj]

Same issue. :/

[leonardfactory]

@valscion Digging furthermore in the inspect, I've found that actually a class is missing (shows as undefined) in the datatip container:

<div data-reactroot="">
  <div class="undefined nuclide-datatip-container"> {/* here */}
    <div class="nuclide-datatip-content">...</div>
    <div class="nuclide-datatip-pin-button icon-pin" title="Pin this Datatip">...</div>
  </div>
</div>

I can't see at the moment if class was defined in previous atom version (or this is unrelated), but I hope this may helps debugging.

[peterhal]

Yes this is a known issue with Nuclide and Atom 1.9. We are actively working on a fix.

Currently Nuclide is compatible with Atom 1.8.0.

[marudor]

Workaround - use this as custom style

.nuclide-type-hint-text-editor atom-text-editor::shadow .editor-contents--private > .scroll-view > .lines > div > div {
  position: relative!important;
}

[willmruzek]

This is happening to me with Atom 1.20.0