diff --git a/src/assets/markdown.scss b/src/assets/markdown.scss index 9e726d329ece..5c4c9cc4b3d9 100644 --- a/src/assets/markdown.scss +++ b/src/assets/markdown.scss @@ -47,6 +47,7 @@ } pre { + width: calc(100% - var(--default-clickable-area)); padding: 4px; margin: 2px 0; border-radius: var(--border-radius); diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 14e1b157f00d..9e1c985ca1ad 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -20,11 +20,14 @@ * */ -//messages list max width -$messages-list-max-width: 800px; - -//message utils width -$message-utils-width: 100px; +/** Messages list dimensions: + * - text max width: 70em (recommended by W3C standard) + * - utils-width: 52px (group avatar with paddings) + 120px (date and checkmark) + 4*4px (date paddings) + * - list max width: text width + utils width + 4 + 8 (paddings) + */ +$messages-text-max-width: calc(70 * var(--default-font-size)); +$message-utils-width: calc(52px + 4 * var(--default-grid-baseline) + 120px); +$messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 3 * var(--default-grid-baseline)); // background color of call container $color-call-background: rgba(34, 34, 34, 0.8); diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index f69fc3467267..a61e4c569133 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -573,7 +573,8 @@ export default { } .message-body { - padding: 4px 4px 4px 8px; + padding: var(--default-grid-baseline); + padding-left: calc(2 * var(--default-grid-baseline)); font-size: var(--default-font-size); line-height: var(--default-line-height); position: relative; @@ -626,7 +627,7 @@ export default { background-color: var(--color-main-background); border-radius: calc(var(--default-clickable-area) / 2); box-shadow: 0 0 4px 0 var(--color-box-shadow); - height: 44px; + height: var(--default-clickable-area); z-index: 1; & h6 { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue index 24ca3a11a827..7e0f4672b72c 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue @@ -426,6 +426,7 @@ export default { diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue index 53d68f60493d..65eec24509d9 100644 --- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue +++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue @@ -196,8 +196,8 @@ export default { &__author { display: flex; gap: 4px; - max-width: 600px; - padding: 4px 0 0 8px; + max-width: $messages-text-max-width; + padding: var(--default-grid-baseline) 0 0 calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); &-name { diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue index fe87312dc484..58c9f0533721 100644 --- a/src/components/NewMessage/NewMessage.vue +++ b/src/components/NewMessage/NewMessage.vue @@ -1044,6 +1044,8 @@ export default {