Show title entirely and cut of secondary information gracefully in typeahead results of main search

@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge

phorge phabricator

fork

Summary:
This revision increases the usability of the typeahead results of the main search (on the right in the top bar).
The result texts wont't overflow in a reasonable way.

| Before | After |
|-----------|-----------|
| {F715296} | {F715385} |

The result title (red box) will now break so the user can read and understand it.
The result type (blue box) will be cut off inside the padding with an ellipsis.

See T15715

Test Plan:
Check it out and use the main search in the top bar to create typeahead result with very long titles ;)

Nothing changes for short titles.

Reviewers: O1 Blessed Committers, valerio.bozzolan, avivey

Reviewed By: O1 Blessed Committers, valerio.bozzolan, avivey

Subscribers: avivey, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15715

Differential Revision: https://we.phorge.it/D25520

Benjamin Kausch 2 years ago b035743c 2f1e271c

+9 -6

2 changed files

expand all

resources

celerity

map.php

webroot

rsrc

css

application

base

main-menu-view.css

+6 -6

resources/celerity/map.php

··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '2f25eb4f', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => '3b2df0d0', 12 + 'core.pkg.css' => '4e0e22fb', 13 13 'core.pkg.js' => '2eeda9e0', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => '2431def2', ··· 38 38 'rsrc/css/aphront/typeahead.css' => '8779483d', 39 39 'rsrc/css/application/almanac/almanac.css' => '2e050f4f', 40 40 'rsrc/css/application/auth/auth.css' => 'c2f23d74', 41 - 'rsrc/css/application/base/main-menu-view.css' => '5d673247', 41 + 'rsrc/css/application/base/main-menu-view.css' => '33820efe', 42 42 'rsrc/css/application/base/notification-menu.css' => '4df1ee30', 43 43 'rsrc/css/application/base/phui-theme.css' => '35883b37', 44 44 'rsrc/css/application/base/standard-page-view.css' => 'e08c7462', ··· 790 790 'phabricator-flag-css' => '2b77be8d', 791 791 'phabricator-keyboard-shortcut' => '1a844c06', 792 792 'phabricator-keyboard-shortcut-manager' => '81debc48', 793 - 'phabricator-main-menu-view' => '5d673247', 793 + 'phabricator-main-menu-view' => '33820efe', 794 794 'phabricator-nav-view-css' => '423f92cc', 795 795 'phabricator-notification' => 'a9b91e3f', 796 796 'phabricator-notification-css' => '30240bd2', ··· 1211 1211 'javelin-dom', 1212 1212 'phabricator-notification', 1213 1213 ), 1214 + '33820efe' => array( 1215 + 'phui-theme-css', 1216 + ), 1214 1217 34450586 => array( 1215 1218 'javelin-color', 1216 1219 'javelin-install', ··· 1498 1501 'javelin-stratcom', 1499 1502 'javelin-dom', 1500 1503 'phuix-dropdown-menu', 1501 - ), 1502 - '5d673247' => array( 1503 - 'phui-theme-css', 1504 1504 ), 1505 1505 '5d83623b' => array( 1506 1506 'javelin-dom',

webroot/rsrc/css/application/base/main-menu-view.css

······

Configure Feed

Configure Feed