SF-3067 Fix offline indicator not displaying

sillsdev · Nov 1, 2024 · 6f6674f · 6f6674f
1 parent f0694f5
commit 6f6674f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
@@ -98,11 +98,10 @@
             @if (showInstallIconOnAvatar$ | async) {
               <mat-icon class="install-badge">install_mobile</mat-icon>
             }
-            <app-avatar id="avatarId" [user]="currentUser">
-              @if (!isAppOnline) {
-                <mat-icon class="offline-indicator"> cloud_off</mat-icon>
-              }
-            </app-avatar>
+            <app-avatar id="avatarId" [user]="currentUser"> </app-avatar>
+            @if (!isAppOnline) {
+              <mat-icon class="offline-indicator">cloud_off</mat-icon>
+            }
           </button>
         }
         <mat-menu #userMenu="matMenu" class="user-menu">

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss
@@ -192,11 +192,12 @@ header {
 }
 
 .offline-indicator {
-  position: absolute;
-  inset-inline-end: 0;
+  position: fixed !important;
   direction: inherit; // needed to override direction: rtl from .material-icons
   font-size: 12px;
   color: white;
+  top: 30px;
+  left: calc(100% - 35px);
 }
 
 .online-status {