mirror of
https://github.com/zulip/zulip.git
synced 2025-11-19 05:58:25 +00:00
64b78ad992
On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: https://github.com/postcss/postcss-media-minmax/pull/28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
26 lines
464 B
CSS
26 lines
464 B
CSS
#typing_notifications {
|
|
display: none;
|
|
margin-left: 10px;
|
|
font-style: italic;
|
|
color: hsl(0, 0%, 53%);
|
|
}
|
|
|
|
#typing_notification_list {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* This max-width must be synced with message_viewport.is_narrow */
|
|
@media (width < $xl_min) {
|
|
#typing_notifications {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
#typing_notifications {
|
|
margin-right: 7px;
|
|
margin-left: 7px;
|
|
}
|
|
}
|