Fixed some UI bugs

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -432,6 +432,16 @@ class ChatPage extends LitElement {
         /* Add Image Modal Dialog Styling */
 
         .dialog-container {
+            position: relative;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            padding: 0 10px;
+            gap: 10px;
+            height: 100%;
+        }
+
+        .dialog-container-loader {
             position: relative;
             display: flex;
             align-items: center;
@@ -628,7 +638,7 @@ class ChatPage extends LitElement {
             ${(this.isUploadingImage || this.isDeletingImage) ? html`
 					<div class="dialogCustom">
                         <div class="dialogCustomInner">
-                            <div class="dialog-container">
+                            <div class="dialog-container-loader">
                                 <div class=${`smallLoading marginLoader`}></div>
                                 <p>
                                 ${this.isDeletingImage ?

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -400,26 +400,33 @@ export const chatStyles = css`
 	.image-container {
 		display: flex;
 	}
+
 	.message-data-level  {
 		height: 21px;
 		width: 21px;
 		overflow: hidden;
 	}
+
 	.defaultSize {
-		width:45vh; 
-		height:40vh
+		width: 45vh; 
+		height: 40vh;
 	}
+
 	.image-delete-icon {
 		margin-left: 5px;
     height: 20px;
-	cursor: pointer;
-	visibility: hidden;
-	transition: .2s all;
-	opacity: .8
+		cursor: pointer;
+		visibility: hidden;
+		transition: .2s all;
+		opacity: 0.8;
+		color: rgb(228, 222, 222);
+    padding-left: 7px;
 	}
+	
 	.image-delete-icon:hover {
-		opacity: 1
+		opacity: 1;
 	}
+
 	.message-parent:hover .image-delete-icon {
 		visibility: visible;
 	}

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -414,7 +414,10 @@ class MessageTemplate extends LitElement {
                                     </div>
                                     `}
                                     ${image && !isImageDeleted ? html`
-                                        <div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
+                                        <div 
+                                        class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
+                                        style=${this.isFirstMessage && "margin-top: 10px;"}
+                                        >
                                             ${imageHTML}<vaadin-icon
                                             @click=${() => this.sendMessage({
                                             type: 'delete',
@@ -425,7 +428,10 @@ class MessageTemplate extends LitElement {
                                             class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
                                         </div>
                                     ` : html``}
-                                    <div id="messageContent" class="message">
+                                    <div 
+                                    id="messageContent" 
+                                    class="message" 
+                                    style=${(image && replacedMessage !== "") &&"margin-top: 15px;"}>
                                         ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
                                         <div class="${((this.isFirstMessage === false && 
                                             this.isSingleMessageInGroup === true &&