forked from AkkomaGang/akkoma-fe
Stop notifications boxes from change size over time
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”.
This commit is contained in:
parent
ccb0ffdc8a
commit
beee99e733
1 changed files with 4 additions and 1 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue