(UI) improve responsiveness

Author: antoine92190

src/ChatWindow/EmojiPicker.vue

@@ -23,7 +23,7 @@
 						:style="{
 							height: `${emojiPickerHeight}px`,
 							top: positionTop ? emojiPickerHeight : `${emojiPickerTop}px`,
-							right: positionTop ? '-50px' : positionRight ? '70px' : '',
+							right: emojiPickerRight,
 							display: emojiPickerTop || !emojiReaction ? 'initial' : 'none'
 						}"
 					>
@@ -72,7 +72,8 @@ export default {
 		return {
 			search: '',
 			emojiPickerHeight: 320,
-			emojiPickerTop: 0
+			emojiPickerTop: 0,
+			emojiPickerRight: ''
 		}
 	},
 	methods: {
@@ -81,20 +82,33 @@ export default {
 		},
 		openEmoji(ev) {
 			this.$emit('openEmoji', true)
-			this.setEmojiPickerHeight(ev.clientY, ev.view.innerHeight)
+			this.setEmojiPickerPosition(
+				ev.clientY,
+				ev.view.innerWidth,
+				ev.view.innerHeight
+			)
 		},
-		setEmojiPickerHeight(clientY, innerHeight) {
+		setEmojiPickerPosition(clientY, innerWidth, innerHeight) {
 			setTimeout(() => {
 				if (!this.roomFooterRef) return
 
-				if (innerHeight < 700) this.emojiPickerHeight = 300
-
+				if (innerHeight < 700) this.emojiPickerHeight = innerHeight / 2
 				const roomFooterTop = this.roomFooterRef.getBoundingClientRect().top
 				const pickerTopPosition =
-					roomFooterTop - clientY > this.emojiPickerHeight - 80
-
-				if (pickerTopPosition) this.emojiPickerTop = clientY
-				else this.emojiPickerTop = clientY - this.emojiPickerHeight
+					roomFooterTop - clientY > this.emojiPickerHeight - 50
+
+				if (pickerTopPosition) this.emojiPickerTop = clientY + 10
+				else this.emojiPickerTop = clientY - this.emojiPickerHeight - 10
+
+				if (innerWidth < 500 && !this.positionRight) {
+					this.emojiPickerRight = innerWidth / 5 + 'px'
+				} else {
+					this.emojiPickerRight = this.positionTop
+						? '-50px'
+						: this.positionRight
+						? '60px'
+						: ''
+				}
 			}, 0)
 		}
 	}

src/ChatWindow/Message.vue

@@ -803,4 +803,22 @@ export default {
 		background: var(--chat-message-bg-color-reaction-hover-me);
 	}
 }
+
+@media only screen and (max-width: 768px) {
+	.message-container {
+		padding: 3px;
+	}
+
+	.message-box {
+		flex: 0 0 80%;
+		max-width: 80%;
+	}
+	.offset-current {
+		margin-left: 20%;
+	}
+
+	.options-container {
+		right: 5px;
+	}
+}
 </style>

src/ChatWindow/Room.vue

@@ -664,6 +664,7 @@ export default {
 
 .box-footer {
 	display: flex;
+	position: relative;
 	background: var(--chat-footer-bg-color);
 	padding: 10px 8px 10px;
 }
@@ -752,7 +753,7 @@ textarea {
 	position: absolute;
 	max-width: 20%;
 	left: 16px;
-	bottom: 18px;
+	top: 18px;
 }
 
 .image-file {
@@ -844,11 +845,16 @@ textarea {
 
 	.icon-textarea {
 		margin: 6px 0 0 5px;
+
+		svg,
+		.wrapper {
+			margin: 0 5px;
+		}
 	}
 
 	.image-container {
+		top: 10px;
 		left: 10px;
-		bottom: 10px;
 	}
 
 	.room-footer {