fix(MessageList): reduce spacing for message, user avatar and status …

…icon Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Jul 26, 2024 · e08ca28 · e08ca28
1 parent 4e1c3f7
commit e08ca28
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -134,25 +134,23 @@ 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;
 
 	&__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 {