@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
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
+11
-1
+11
-1
webroot/rsrc/css/aphront/tokenizer.css
+11
-1
webroot/rsrc/css/aphront/tokenizer.css
···
72
72
cursor: pointer;
73
73
border-radius: 3px;
74
74
color: {$sh-bluetext};
75
-
min-height: 16px;
75
+
76
+
/* See T13495. Certain Chinese glyphs can cause layout artifacts unless
77
+
we're fairly aggressive about specifying element sizing. */
78
+
79
+
line-height: 18px;
80
+
min-height: 20px;
81
+
max-height: 20px;
82
+
white-space: nowrap;
83
+
overflow: hidden;
84
+
text-overflow: ellipsis;
85
+
max-width: 95%;
76
86
}
77
87
78
88
a.jx-tokenizer-token:hover {