From 366a2efee41bc3c0388360717d09def0dbffa0bb Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Wed, 25 Sep 2024 13:37:09 +0200 Subject: [PATCH] style: decrease chat width to 750px (50em) Signed-off-by: Maksim Sukharev --- src/assets/variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/variables.scss b/src/assets/variables.scss index d2e02efff31..b0aeeb6f521 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -4,13 +4,13 @@ */ /** Messages list dimensions: - * - text max width: 1050px (70em recommended by W3C standard) + * - text max width: ~750px (80 characters per line is recommended by W3C standard) * - avatar width: 32px (AVATAR.SIZE.SMALL) + 16px (paddings) = 48px * - info width: 8ch(~68px) (timestamp) + 40px (checkmark with paddings) = ~108px * - list max width: 48px (avatar width) + 1058px (text width with paddings) + ~108px (info width) = ~1214px * - input max width: ~1214px (list max width) - 100px (send button) = ~1114px */ -$messages-text-max-width: calc(70 * var(--default-font-size)); +$messages-text-max-width: calc(50 * var(--default-font-size)); $messages-avatar-width: calc(32px + 4 * var(--default-grid-baseline)); $messages-info-width: calc(8ch + var(--clickable-area-small, 24px) + 4 * var(--default-grid-baseline)); $messages-list-max-width: calc($messages-avatar-width + $messages-text-max-width + 2 * var(--default-grid-baseline) + $messages-info-width);