Fixed chat image loading modal

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

@@ -404,30 +404,23 @@ class ChatPage extends LitElement {
         .dialogCustom p {
             color: var(--black)
         }
-        .row {
-				display: flex;
-				width: 100%;
-				align-items: center;
-			}
-
-            .between {
-				justify-content: space-between;
-			}
 
         .dialogCustomInner {
             min-width: 300px;
             height: 40px;
             background-color: var(--white);
-				box-shadow: var(--mdc-dialog-box-shadow, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));
+            box-shadow: rgb(119 119 119 / 32%) 0px 4px 12px;
             padding: 10px;
             border-radius: 4px;
         }
+
         .dialogCustomInner ul {
             padding-left: 0px
         }
         .dialogCustomInner li {
             margin-bottom: 10px;
         }
+
         .marginLoader {
             margin-right: 8px;
         }
@@ -438,7 +431,7 @@ class ChatPage extends LitElement {
             height: 2px;
         }
         .smallLoading {
-				border-width: 0.6em;
+            border-width: 0.8em;
             border-style: solid;
             border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2)
             rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
@@ -479,20 +472,9 @@ class ChatPage extends LitElement {
             position: relative;
             display: flex;
             align-items: center;
-            justify-content: center;
-            flex-direction: column;
+            padding: 0 10px;
+            gap: 10px;
             height: 100%;
-            padding: 18px 18px 0 18px;
-            gap: 15px;
-        }
-
-        .dialog-container:after {
-            position: absolute;
-            content: "";
-            bottom: -15px;
-            height: 1px;
-            width: 95%;
-            background: #dddddd;
         }
 
         .dialog-image {
@@ -746,27 +728,16 @@ class ChatPage extends LitElement {
 					<div class="dialogCustom">
                         <div class="dialogCustomInner">
                             <div class="dialog-container">
-						
-								<div class="row between">
-									
                                 <div class=${`smallLoading marginLoader`}></div>
                                 <p>
                                 ${this.isDeletingImage ?
                                     translate("chatpage.cchange31") : translate("chatpage.cchange30")}
-										
                                 </p>
                             </div>			
-
-								
-							
-						</div>
-						
                         </div>                        
-                                    
 			        </div>
             </div>
 			`: ''}			
-		
         </div>
         `
     }

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

@@ -114,16 +114,14 @@ class ChatScroller extends LitElement {
       }
 
     async firstUpdated() {
-        this.viewElement = this.shadowRoot.getElementById('viewElement')
-        this.upObserverElement = this.shadowRoot.getElementById('upObserver')
-        this.downObserverElement = this.shadowRoot.getElementById('downObserver')
-
-
+        this.viewElement = this.shadowRoot.getElementById('viewElement');
+        this.upObserverElement = this.shadowRoot.getElementById('upObserver');
+        this.downObserverElement = this.shadowRoot.getElementById('downObserver');
         // Intialize Observers
-        this.upElementObserver()
-        this.downElementObserver()
-        await this.updateComplete
-        this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
+        this.upElementObserver();
+        this.downElementObserver();
+        await this.updateComplete;
+        this.viewElement.scrollTop = this.viewElement.scrollHeight;
     }
 
     _getOldMessage(_scrollElement) {