Style upload editor

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

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

@@ -285,6 +285,8 @@ export default {
 		display: block;
 		overflow: hidden;
 		white-space: nowrap;
+		text-overflow: ellipsis;
+		margin-top: 4px;
 	}
 
 	&:not(.file-preview--viewer-available) {
@@ -296,6 +298,7 @@ export default {
 		max-width: 160px;
 		max-height: 160px;
 		margin: 10px;
+		padding: 12px;
 		.preview {
 			margin: auto;
 		}

src/components/UploadEditor.vue

@@ -144,16 +144,21 @@ export default {
 @import '../assets/variables.scss';
 
 .upload-editor {
-	height: 100%;
 	&__previews {
-		display: flex;
-		flex-wrap: wrap;
+		overflow-x: hidden !important;
+		display: grid;
+		position: relative;
 		overflow: auto;
+		grid-template-columns: repeat(4, auto);
 	}
 	&__actions {
 		display: flex;
 		justify-content: space-between;
 		margin-top: 16px;
+		margin-bottom: 4px;
+		button {
+			margin: 0 4px 0 4px;
+		}
 	}
 }
 
@@ -171,7 +176,7 @@ export default {
 		z-index: 2;
 		box-shadow: 0 0 4px var(--color-box-shadow);
 		padding: 0;
-		margin: 0;
+		margin: auto;
 		&__plus {
 			color: var(--color-primary-text);
 			z-index: 3;
@@ -179,4 +184,10 @@ export default {
 	}
 }
 
+::v-deep .modal-container {
+	display: flex !important;
+	flex-direction: column;
+	padding: 12px !important;
+	min-width: 400px;
+}
 </style>