fix(MessageList): rewrite CSS layout to grid-based messages and width…

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

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -9,7 +9,9 @@
  * - list max width: text width + utils width + 4 + 8 (paddings) = 1250px
  */
 $messages-text-max-width: calc(70 * var(--default-font-size));
-$message-utils-width: calc(52px + 4 * var(--default-grid-baseline) + 120px);
+$message-avatar-column-width: 52px;
+$message-status-icon-width: var(--default-clickable-area);
+$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));
 $message-input-max-width: calc($messages-list-max-width - 100px);
 

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -447,16 +447,14 @@ export default {
 @import '../../../../../assets/variables';
 
 .message-main {
-	display: flex;
+	display: grid;
+	grid-template-columns: minmax(0, $messages-text-max-width) 1fr;
 	justify-content: space-between;
 	align-items: flex-start;
 	min-width: 100%;
 
 	&__text {
-		flex: 0 1 $messages-text-max-width;
 		width: 100%;
-		min-width: 0;
-		max-width: $messages-text-max-width;
 		color: var(--color-text-light);
 
 		& > .single-emoji {
@@ -514,7 +512,7 @@ export default {
 		display: flex;
 		color: var(--color-text-maxcontrast);
 		font-size: var(--default-font-size);
-		flex: 1 0 auto;
+		width: max-content;
 		padding: 0 calc(2 * var(--default-grid-baseline));
 
 		.date {
@@ -532,7 +530,7 @@ export default {
 
 .message-status {
 	width: var(--default-clickable-area);
-	height: 24px;
+	height: var(--default-line-height);
 	display: flex;
 	justify-content: center;
 	align-items: center;

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -121,9 +121,9 @@ export default {
 @import '../../../assets/variables';
 
 .wrapper {
-	max-width: $messages-list-max-width;
 	display: flex;
-	margin: auto;
+	align-items: flex-start;
+	width: 100%;
 	padding: 0;
 
 	&:focus {
@@ -142,9 +142,10 @@ export default {
 	&__avatar {
 		position: sticky;
 		top: 0;
-		height: 52px;
-		width: 52px;
-		padding: 18px 10px 10px 10px;
+		height: $message-avatar-column-width;
+		width: $message-avatar-column-width;
+		padding: 10px;
+		margin-top: 8px;
 	}
 
 	&__author {

diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -254,13 +254,12 @@ export default {
 }
 
 .wrapper {
-	max-width: $messages-list-max-width;
 	display: flex;
-	margin: auto;
+	width: 100%;
 	padding: 0;
 	&--system {
 		flex-direction: column;
-		padding-left: calc(var(--default-clickable-area) + 8px);
+		padding-left: $message-avatar-column-width;
 	}
 	&:focus {
 		background-color: rgba(47, 47, 47, 0.068);

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -21,7 +21,7 @@
 			:key="`section_${dateTimestamp}`"
 			:ref="`dateGroup-${token}`"
 			:data-date-timestamp="dateTimestamp"
-			:class="{'has-sticky': dateTimestamp === stickyDate}">
+			:class="['scroller__content', { 'has-sticky': dateTimestamp === stickyDate }]">
 			<li class="messages-group__date">
 				<span class="messages-group__date-text" role="heading" aria-level="3">
 					{{ dateSeparatorLabels[dateTimestamp] }}
@@ -1249,6 +1249,11 @@ export default {
 		border-bottom-color: transparent;
 	}
 
+	&__content {
+		max-width: $messages-list-max-width;
+		margin: 0 auto;
+	}
+
 	&__loading {
 		height: 40px;
 		transform: translatex(-64px);