From beee99e733a6508e3744140ee73e8b7be8194d85 Mon Sep 17 00:00:00 2001 From: Oneric Date: Wed, 18 Oct 2023 22:51:24 +0200 Subject: [PATCH] Stop notifications boxes from change size over time MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Notifications about favourites and follows use .notification-right, notifications about replies instead use .heading-right. Previously only the former set a min-width, however the chosen value of 3em was too small to fit the worst case. As a consequence, when the timestamp text changes over time, its element width changes, which may result in neighbouring text (no longer) needing to wrap to a new line in turn changing the size of the whole notification box pushing older notification boxes down/up. These constant movements at the side of the screen can be quite annoying and confusing when the cause cannot be immediately discerned. Avoid this, by reserving enough space for any timestamp. For English, the worst case is the five-character 'XXmin', since the short identifier for minutes is the longest with three letters. With two exceptions, all other current localisation also do not exceed three letters in any short unit identifier up to days. However, some localisations (e.g. Polish) additionally insert a space between numerical value and unit. This matches SI recommendations pushing the worst case to 6 characters. 6 characters will be sufficient for timestamps up to 3 weeks in all languages (minus prev exceptions), which seems reasonable enough as beyond this timestamps rarely change anyway. The aforementioned exceptions being Vietnamese and Occitan, but in the current localisation all or the relevant short unit identifiers are identical to the long forms indicating this is just due to incomplete translation. Indeed, Vietnamese Wikipedia (read through machine translation) suggests “ph” is commonly used as unit identifiers for minutes, but the current localisation fully spells it out as “phút”. --- src/components/notifications/notifications.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3d3408f7..635a0a9b 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -105,9 +105,12 @@ flex: 1; padding-left: 0.8em; min-width: 0; + } + .heading-right, .notification-right { .timeago { - min-width: 3em; + display: inline-block; + min-width: 6em; text-align: right; } }