Autocompleter box size matches the content width

[veloman-yunkan]

Note however that no upper limit is set on the width of the autocompleter box - it is possible, but I don't see how we could come up with a good value for it.

Fixes #674

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 41.47%. Comparing base (664944f) to head (2eea613).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1175   +/-   ##
=======================================
  Coverage   41.47%   41.47%           
=======================================
  Files          59       59           
  Lines        4272     4272           
  Branches     2336     2336           
=======================================
  Hits         1772     1772           
- Misses        999     1002    +3     
+ Partials     1501     1498    -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kelson42]

@veloman-yunkan I propose 300px (it's arbitrary), we should have ellipsis if this happens (title too long) and HTML hint, so if someone if hover its' still possible to see the full title. What do you think?

[veloman-yunkan]

Truncating the suggestion and adding a hint (to be displayed on hover) will be a lot more work. And it will be mostly unused on mobile. Should we really pursue it?

[kelson42]

@veloman-yunkan All of this should be doable via a few CSS directives... or do I get it wrong!

[veloman-yunkan]

@veloman-yunkan All of this should be doable via a few CSS directives... or do I get it wrong!

Indeed, text-overflow: ellipsis solves the part I was most concerned with.

[veloman-yunkan]

Done. Please test.

Note however that I don't like in this PR that autoComplete.css is modified. It may be better to move the CSS customization of autocomplete_wrapper into kiwix.css.

[kelson42]

LGTM, only a few remarks:

• 300px is too small. Not sure about the right attitude: removing this or putting something significantly larger. Probably putting 600px is the best compromise.
• I don't understand why putting the new CSS rules in kiwix.css would be better. Looks good to me like it is.

[veloman-yunkan]

• I don't understand why putting the new CSS rules in kiwix.css would be better. Looks good to me like it is.

autoComplete.css was imported from another project.

[veloman-yunkan]

• 300px is too small. Not sure about the right attitude: removing this or putting something significantly larger. Probably putting 600px is the best compromise.

Done