revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 14:52:41 +01:00
Code Issues Releases Wiki Activity

Add more layout constraints to tokenizer CSS to prevent layout issues with Chinese glyphs in Firefox 73

Browse source 
Summary:
Fixes T13495. See that task for details.

Tokenizer tokens which contain Chinese glyphs are slightly taller than normal tokens in Firefox 73, and at some non-100% zoom levels in other browsers.

This cauess the tokenizer list to layout and line break oddly.

Fix this by clamping tokenizer sizes more aggressively. Specifying a `max-height` means they can no longer line wrap, so this also requires more specification of overflow behavior.

Test Plan:
Before:

{F7216435}

After:

{F7216439}

Maniphest Tasks: T13495

Differential Revision: https://secure.phabricator.com/D21026
This commit is contained in:
epriestley 2020-02-24 07:43:11 -08:00
parent e58ef418c7
commit d3f4af4a3a
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
webroot/rsrc/css/aphront/tokenizer.css
View file

@ -72,7 +72,17 @@ a.jx-tokenizer-token {
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
color: {$sh-bluetext}; color: {$sh-bluetext};
min-height: 16px;
/* See T13495. Certain Chinese glyphs can cause layout artifacts unless
we're fairly aggressive about specifying element sizing. */
line-height: 18px;
min-height: 20px;
max-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 95%;
} }
a.jx-tokenizer-token:hover { a.jx-tokenizer-token:hover {