From d3f4af4a3a0b871f8019cd975f1cd977e236c4eb Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 24 Feb 2020 07:43:11 -0800 Subject: [PATCH] Add more layout constraints to tokenizer CSS to prevent layout issues with Chinese glyphs in Firefox 73 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 --- webroot/rsrc/css/aphront/tokenizer.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css index 7cfc9e391b..b0b638f062 100644 --- a/webroot/rsrc/css/aphront/tokenizer.css +++ b/webroot/rsrc/css/aphront/tokenizer.css @@ -72,7 +72,17 @@ a.jx-tokenizer-token { cursor: pointer; border-radius: 3px; 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 {