Merge pull request #11947 from nextcloud/style/noid/extend-chat-width

style(MessagesList): extend chat width to 70em

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);

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) = 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
+ */
+$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);

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 {

src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue

@@ -426,6 +426,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../../../assets/markdown';
+@import '../../../../../assets/variables';
 
 .message-main {
 	display: flex;
@@ -434,10 +435,10 @@ export default {
 	min-width: 100%;
 
 	&__text {
-		flex: 0 1 600px;
+		flex: 0 1 $messages-text-max-width;
 		width: 100%;
 		min-width: 0;
-		max-width: 600px;
+		max-width: $messages-text-max-width;
 		color: var(--color-text-light);
 
 		& > .single-emoji {
@@ -475,7 +476,7 @@ export default {
 			.message-copy-code {
 				position: absolute;
 				top: 0;
-				right: 4px;
+				right: calc(4px + var(--default-clickable-area));
 				margin-top: 4px;
 				background-color: var(--color-background-dark);
 			}
@@ -496,7 +497,7 @@ export default {
 		color: var(--color-text-maxcontrast);
 		font-size: var(--default-font-size);
 		flex: 1 0 auto;
-		padding: 0 8px 0 8px;
+		padding: 0 calc(2 * var(--default-grid-baseline));
 
 		.date:last-child {
 			margin-right: var(--default-clickable-area);
@@ -520,4 +521,9 @@ export default {
 :deep(.rich-text--component) {
 	direction: ltr;
 }
+
+// Hardcode to restrict size of message images for the chat
+:deep(.widget-default--image) {
+	max-width: 240px;
+}
 </style>

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 {

src/components/NewMessage/NewMessage.vue

@@ -1044,6 +1044,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../assets/variables';
+
 .wrapper {
 	padding: 12px 12px 12px 0;
 	min-height: 69px;
@@ -1054,7 +1056,7 @@ export default {
 	display: flex;
 	gap: 4px;
 	position: relative;
-	max-width: 700px;
+	max-width: calc($messages-list-max-width - 100px);
 	margin: 0 auto;
 
 	&__emoji-picker {

src/components/Quote.vue

@@ -294,7 +294,7 @@ export default {
 	margin: 4px 0;
 	padding: 6px 6px 6px 24px;
 	display: flex;
-	max-width: $messages-list-max-width - $message-utils-width;
+	max-width: $messages-text-max-width;
 	border-radius: var(--border-radius-large);
 	border: 2px solid var(--color-border);
 	background-color: var(--color-main-background);

src/components/UIShared/LoadingPlaceholder.vue

@@ -81,6 +81,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../assets/variables';
+
 .placeholder-list {
 	width: 100%;
 	transform: translateZ(0); // enable hardware acceleration
@@ -131,7 +133,7 @@ export default {
 
 // Messages placeholder ruleset
 .placeholder-list--messages {
-	max-width: 800px;
+	max-width: $messages-list-max-width;
 	margin: auto;
 
 	.placeholder-item {
@@ -148,7 +150,7 @@ export default {
 		}
 
 		&__content {
-			max-width: 600px;
+			max-width: $messages-text-max-width;
 			padding: 12px 0;
 
 			&-line {