From e08ca284b6dc1c8234f3b55367c1f8cf1ad172a7 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 26 Jul 2024 16:18:20 +0200
Subject: [PATCH] fix(MessageList): reduce spacing for message, user avatar and
 status icon

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/assets/variables.scss                              | 10 +++++-----
 .../MessagesList/MessagesGroup/Message/Message.vue     |  1 -
 .../MessagesGroup/Message/MessagePart/MessageBody.vue  |  8 +++++---
 .../MessagesList/MessagesGroup/MessagesGroup.vue       | 10 ++++------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 239514490ef..b2923e9e550 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -5,14 +5,14 @@
 
 /** Messages list dimensions:
  * - text max width: 70em (recommended by W3C standard) = 1050px
- * - utils-width: 52px (group avatar with paddings) + 120px (date and checkmark) + 4*4px (date paddings) = 188px
- * - list max width: text width + utils width + 4 + 8 (paddings) = 1250px
+ * - utils-width: 40px (group avatar with paddings) + 100px (date and checkmark with paddings) = 140px
+ * - list max width: text width + utils width + 8 (paddings) = 1196px
  */
 $messages-text-max-width: calc(70 * var(--default-font-size));
-$message-avatar-column-width: 52px;
-$message-status-icon-width: var(--default-clickable-area);
+$message-avatar-column-width: calc(32px + 2 * var(--default-grid-baseline)); // AVATAR.SIZE.SMALL - 32px
+$message-status-icon-width: 20px;
 $message-utils-width: calc($message-avatar-column-width + 80px + $message-status-icon-width);
-$messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 3 * var(--default-grid-baseline));
+$messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 2 * var(--default-grid-baseline));
 $message-input-max-width: calc($messages-list-max-width - 100px);
 
 // background color of call container
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index c885db811cc..e16d30fa4bf 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -449,7 +449,6 @@ export default {
 
 .message-body {
 	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;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 5c6905950e6..503f30dedc5 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -83,6 +83,8 @@
 				@mouseleave="showReloadButton = false"
 				@blur="showReloadButton = false">
 				<NcButton v-if="sendingErrorCanRetry && showReloadButton"
+					type="tertiary"
+					size="small"
 					:aria-label="sendingErrorIconTooltip"
 					@click="handleRetry">
 					<template #icon>
@@ -513,7 +515,7 @@ export default {
 		color: var(--color-text-maxcontrast);
 		font-size: var(--default-font-size);
 		width: max-content;
-		padding: 0 calc(2 * var(--default-grid-baseline));
+		padding: 0 var(--default-grid-baseline);
 
 		.date {
 			&--hidden {
@@ -522,14 +524,14 @@ export default {
 			}
 
 			&:last-child {
-				margin-right: var(--default-clickable-area);
+				margin-right: $message-status-icon-width;
 			}
 		}
 	}
 }
 
 .message-status {
-	width: var(--default-clickable-area);
+	width: $message-status-icon-width;
 	height: var(--default-line-height);
 	display: flex;
 	justify-content: center;
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 28b8484e54a..3a01126a6fc 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -134,7 +134,7 @@ export default {
 .messages {
 	flex: auto;
 	display: flex;
-	padding: 8px 0 8px 0;
+	padding: var(--default-grid-baseline) 0;
 	flex-direction: column;
 	width: 100%;
 	min-width: 0;
@@ -142,17 +142,15 @@ export default {
 	&__avatar {
 		position: sticky;
 		top: 0;
-		height: $message-avatar-column-width;
-		width: $message-avatar-column-width;
-		padding: 10px;
-		margin-top: 8px;
+		padding: var(--default-grid-baseline);
+		margin-top: calc(2 * var(--default-grid-baseline));
 	}
 
 	&__author {
 		display: flex;
 		gap: 4px;
 		max-width: $messages-text-max-width;
-		padding: var(--default-grid-baseline) 0 0 calc(2 * var(--default-grid-baseline));
+		padding-left: var(--default-grid-baseline);
 		color: var(--color-text-maxcontrast);
 
 		&-name {