Text shadow appears behind the entered text that disrupts readability

[maximbaz]

• I am on the latest Cerebro.app version
• I have searched the issues of this repo and believe that this is not a duplicate

• OS version and name: ArchLinux
• Cerebro.app version: 0.3.1
• Relevant information from devtools (See above how to open it): N/A

Issue

With the update to 0.3.1 there is now a weird text shadow showing behind the entered text. Basic apps seem to be not affected, but other plugins are. Better see the gif:

Another picture that shows how bad the readability has become:

[LuckyLukert]

Hi,

I have the same problem.
The autocompletion has an other font than the typed text.

Best regards,
Lucky

[maximbaz]

The problem is that this line gets overridden by some css-reset file for <input> elements:

https://github.com/KELiON/cerebro/blob/adba0769998a9769454d80e75ebeb1119a9ebb77/app/main/css/global.css#L16

I believe the fix is to append font-family: var(--main-font); after the following line:

https://github.com/KELiON/cerebro/blob/b01acaf6d4159e63cab361c821f90433afbff77a/app/main/components/MainInput/styles.css#L6

[KELiON]

@maximbaz can you try your fix? I can't reproduce it on mac(

[maximbaz]

I can confirm this just in devtools:

But repo cloning from scratch is broken again, these commands:

$ git clone https://github.com/KELiON/cerebro.git cerebro
$ cd cerebro && yarn && cd ./app && yarn && cd ../
$ yarn run dev

Result into this error when running $ yarn run dev:

Uncaught Exception:
Error: Cannot find module '../tray'
    at Module._resolveFilename (module.js:470:15)
    at Function.Module._resolveFilename (/home/maximbaz/private/cerebro/node_modules/electron/dist/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.get [as Tray] (/home/maximbaz/private/cerebro/node_modules/electron/dist/resources/electron.asar/browser/api/exports/electron.js:11:16)
    at AppTray.show (/home/maximbaz/private/cerebro/app/main.js:1795:24)
    at App._electron.app.on (/home/maximbaz/private/cerebro/app/main.js:653:10)
    at emitTwo (events.js:111:20)
    at App.emit (events.js:191:7)

Wanna have a separate bug for that? 🙂

[lawgsy]

I can confirm this bug and the proposed fix as working. Windows 10, clean install/compile.

The underlying issue is the dependency normalize.css, which at some point overwrites the input field CSS, but not the autocomplete one, with font-family: sans-serif;

This same module is causing issues on Windows (10, at least), as it sets the line-height for everything:
html { line-height: 1.15; ...
This causes every result row to display vertical scrollbars (or arrows at least, because the height is too little for an entire bar):

One way of fixing this would be adding overflow-y: hidden; to .title and .subtitle of main/components/ResultList/Row/styles.css (it currently already and only contains an overflow-x: hidden for that component.

Commenting out overflow-x: hidden; for both .title and .subtitle elements in main/components/ResultList/Row/styles.css appears to work just as well.

[lawgsy]

Pull request to possible fix: #421

[maximbaz]

@KELiON planning a release soon? #426 blocks me from testing this bug fix, but it will also block the next release for Arch Linux (because we always recompile from source).

[KELiON]

@maximbaz just released version 0.3.2