UI misalignment due to the font-family choice

[johnhany97]

I noticed that a few weeks ago, the plugin started yielding the following mis-alignment when used in my Slack workspace:

On experimenting with the CSS, I noticed that if I were to remove monospace from the following code snippet, the issue is resolved.
https://github.com/yamadashy/slack-channels-grouping/blob/main/app/styles/content.css#L14

I tried opening the Slack workspace in incognito mode with only this plugin enabled and was still facing the same issue. Please let me know if opening this PR would be sufficient to resolve this issue, or if there are other complications you foresee from such a change.

[yamadashy]

I apologize for the delayed response to this issue and thank you for bringing it to our attention.

While I haven't been able to reproduce the issue in my environment yet, I will investigate further to understand the problem.

[yamadashy]

@johnhany97
I haven't been able to investigate in detail yet, but the fact that removing 'monospace' resolves the issue seems to suggest a scenario where the system is not finding a font that matches 'sans-serif', thus falling back to 'monospace', but not being monospaced.
Additionally, I found information indicating that even with 'monospace', it might not always result in a monospaced format depending on the environment.
Following your suggestion to use only 'sans-serif' seems like a good approach, but I would like to investigate a bit more.

If it's convenient for you, could you please provide details about your operating system and browser?

[johnhany97]

@yamadashy , thank you for taking a look. I really appreciate your help here. I'm running this on my M1 MacBook Pro on macOS Sonoma (though this issue started on the previous macOS), and opening Slack through Chrome. I have Slack saved as a Chrome app - but opening Slack through the regular Chrome window still displays this message.

I dug deeper based on your insights and noticed that for the spans that use the class highlighted above, Chrome is choosing to render Helvetica and Menlo on my computer

I attempted to change both font types in Chrome's settings but that doesn't seem to fix it yet.

[yamadashy]

Thank you for providing such detailed information; it's been very insightful. The shared details about the fonts being used helped identify the cause of the issue.

When font-family: sans-serif, monospace is specified, if sans-serif doesn't support certain characters, only those characters may fallback to monospace or another font, leading to a lack of consistency in rendering.

I experimented with Helvetica, Menlo on CodePen and found that Helvetica only supports characters like │ and └, while Menlo covers the others such as ┬ and ├. This partial support can lead to the odd display we're seeing. It was a valuable learning experience.
https://codepen.io/yamadashy/pen/PoVLKmO?editors=1000

By the way, perhaps because I am Japanese, the font used for sans-serif was Hiragino Kaku Gothic ProN, which support all characters, so I didn't initially notice this issue.

As of now, I haven't come up with a good solution, but I'll explore some options, such as creating a web font dedicated solely to Box-drawing characters and loading it accordingly. Thank you for your research and report.

[johnhany97]

Thank you for figuring this out, I really appreciate you spending the time to put up the codepen as well - this has been very informative.

I leave it to you if you want to investigate a solution that comes pre-bundled with the extension. In my case, I've proceeded to pick another font (Arial Unicode MS) as the default sans-serif font and that's resolved my initial issue.

While i'm here, I wanted to thank you for building this plugin - it's been of great help visually as I'm in a significant number of channels that have similar prefixes.

[yamadashy]

The fix has been implemented into the main branch. I will be testing it on a few PCs and across several Slack workspaces over the next three days. If everything works well without any issues, I'll proceed to create a new release version and make it available.

#40

[yamadashy]

@johnhany97
I've successfully passed the Google review and have published version 1.0.35.
After updating, I was able to confirm that it is working as expected.

Thank you for reporting the issue.
I will be closing this issue now.

It's greatly appreciated. Wishing you a wonderful holiday season!