Show full notification text via tooltip

The tooltip fixes the system notifications problem (mentioned below), and also allows one to quickly read the entire comment without actually having to visit the comment.

Currently, we only show about 50 characters in the notification, truncating it to an ellipsis when exceeded.

This is not much of a problem for dynamic text (e.g. comments) since the full text can be seen after clicking on the notification (brings you to the comment). For system notifications, this is problematic since there's no other way to know what the full text was.

Tried to dynamically change the font size to auto fit, but it wasn't fruitful. Even if it did work, it'll probably won't be legible for a 2000-character comment, plus the entire list will look weird with various font sizes.
This commit is contained in:
infinite-persistence 2021-05-12 14:54:29 +08:00 committed by Thomas Zarebczan
parent 5be7d6ab56
commit 6d6bab13c0
No known key found for this signature in database
GPG key ID: D505010BDB4364BC

View file

@ -145,11 +145,16 @@ export default function Notification(props: Props) {
<div className="notification__title">
<LbcMessage>{notification_parameters.device.title}</LbcMessage>
</div>
<div className="notification__text mobile-hidden">{commentText}</div>
<div title={commentText} className="notification__text mobile-hidden">
{commentText}
</div>
</>
) : (
<>
<div className="notification__text">
<div
title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
className="notification__text"
>
<LbcMessage>{notification_parameters.device.text}</LbcMessage>
</div>
</>