Issue key isn't displayed properly on card view: project key is truncated mid-way through a letter

On the Embedded Crowd project, all our issues have a kind of mangled issue key on the card views in GH. See the attached screenshot, where the "352" issue number overlaps the "EMBCWD" about half-way through the cee.

How about just displaying the issue key as normal text (e.g. "EMBCWD-352"), without positioning the project key and issue number separately?

If you really need to handle long project keys in this UI, a better looking alternative is some JavaScript which measures the length of the text and replaces a character at a time from the project key with ellipsis until the text fits. Like this:

1. EMBCWD-352 (calculate size - too long)
2. EMBCW...-352 (calculate size - too long)
3. EMBC...-352 (calcuate size - too long)
4. EMB...-352 (calculate size - all good!)

Here's some sample JS with a regular expression which will do the replacement:

var issueKey = $(el).text();
while ($(el).width() > maxWidth) {
    issueKey = issueKey.replace(/^(.*)[^\u2026]\u2026?(-\d+)$/, "$1\u2026$2");
    $(el).text(issueKey);
    if (issueKey.match(/^\u2026/) {
        break;
    }
}

Note: it isn't fully tested, and doesn't really produce great results if the issue number is too long to fit. Try it out and adapt as you see fit.

If you have potentially hundreds of these things on the screen, you could cache the result for a given project key and number of digits in the issue number, and reuse the same shortened project key. The fonts we use in our UI all have the same width for the digit glyphs.

In short – no excuse for not making this better!