Show logo and project abbreviation on mobile

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html

@@ -17,18 +17,22 @@
           </button>
         }
         @if (isLoggedIn | async) {
-          <a id="sf-logo-button" mat-icon-button class="hide-lt-sm" [routerLink]="appIconLink">
+          <a id="sf-logo-button" mat-icon-button [routerLink]="appIconLink">
             <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
           </a>
         } @else {
-          <a id="sf-logo-button" mat-icon-button class="hide-lt-sm" href="/">
+          <a id="sf-logo-button" mat-icon-button href="/">
             <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
           </a>
         }
         @if (isProjectSelected) {
-          <span class="project-name-wrapper hide-lt-sm">
-            <span class="project-name">{{ selectedProjectDoc?.data?.name }}</span>
-            <span class="project-short-name">{{ selectedProjectDoc?.data?.shortName }}</span>
+          <span class="project-name-wrapper" [routerLink]="appIconLink">
+            @if (isScreenTiny) {
+              <span class="project-name">{{ selectedProjectDoc?.data?.shortName }}</span>
+            } @else {
+              <span class="project-name">{{ selectedProjectDoc?.data?.name }}</span>
+              <span class="project-short-name">{{ selectedProjectDoc?.data?.shortName }}</span>
+            }
           </span>
         }
         <span class="toolbar-spacer"></span>

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss

@@ -253,6 +253,7 @@ header {
   max-width: 20em;
   min-width: 0;
   margin-inline-start: 4px;
+  cursor: pointer;
 
   .project-name {
     font-size: 0.8em;

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts

@@ -199,31 +199,31 @@ describe('AppComponent', () => {
     // The user opens the drawer again.
     env.click(env.hamburgerMenuButton);
     expect(env.isDrawerVisible).toBe(true);
-    expect(env.component.isExpanded).toBe(true);
+    expect(env.component['isExpanded']).toBe(true);
     // The user clicks to navigate to the translate overview page.
     env.click(env.menuListItems[1]);
     // The drawer disappears, but is still in the dom.
     expect(env.isDrawerVisible).toBe(false);
     expect(env.menuDrawer).not.toBeNull();
-    expect(env.component.isExpanded).toBe(false);
+    expect(env.component['isExpanded']).toBe(false);
 
     // The user opens the drawer.
     env.click(env.hamburgerMenuButton);
     expect(env.isDrawerVisible).toBe(true);
-    expect(env.component.isExpanded).toBe(true);
+    expect(env.component['isExpanded']).toBe(true);
     // The user navigates to the My projects page by clicking the SF logo in the
     // toolbar (or from the My projects item in the avatar menu).
     env.click(env.sfLogoButton);
     // The drawer disappears, even from the dom. The hamburger menu icon is also gone.
     expect(env.isDrawerVisible).toBe(false);
     expect(env.menuDrawer).toBeNull();
     expect(env.hamburgerMenuButton).toBeNull();
-    expect(env.component.isExpanded).toBe(false);
+    expect(env.component['isExpanded']).toBe(false);
     // The user clicks in the My projects component to open another project.
     env.navigateFully(['projects', 'project02']);
     // The drawer should not be showing, but is in the dom.
     expect(env.isDrawerVisible).toBe(false);
-    expect(env.component.isExpanded).toBe(false);
+    expect(env.component['isExpanded']).toBe(false);
     expect(env.menuDrawer).not.toBeNull();
     expect(env.hamburgerMenuButton).not.toBeNull();
   }));
@@ -427,12 +427,12 @@ describe('AppComponent', () => {
     const env = new TestEnvironment('offline');
     env.init();
 
-    expect(env.component.isAppOnline).toBe(false);
+    expect(env.component['isAppOnline']).toBe(false);
     verify(mockedAuthService.checkOnlineAuth()).never();
 
     env.setBrowserOnlineStatus(true);
     tick();
-    expect(env.component.isAppOnline).toBe(false);
+    expect(env.component['isAppOnline']).toBe(false);
     verify(mockedAuthService.checkOnlineAuth()).once();
   }));
 

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts

@@ -52,12 +52,14 @@ declare function gtag(...args: any): void;
 export class AppComponent extends DataLoadingComponent implements OnInit, OnDestroy {
   version: string = versionData.version;
   issueEmail: string = environment.issueEmail;
-  isAppOnline: boolean = false;
-  isExpanded: boolean = false;
   versionNumberClickCount = 0;
 
   hasUpdate: boolean = false;
 
+  protected isAppOnline: boolean = false;
+  protected isExpanded: boolean = false;
+  protected isScreenTiny = false;
+
   private currentUserDoc?: UserDoc;
   private projectUserConfigDoc?: SFProjectUserConfigDoc;
   private isLoggedInUserAnonymous: boolean = false;
@@ -93,6 +95,11 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
       (value: BreakpointState) => (this.isDrawerPermanent = value.matches)
     );
 
+    this.subscribe(
+      this.breakpointObserver.observe(this.breakpointService.width('<', Breakpoint.SM)),
+      (state: BreakpointState) => (this.isScreenTiny = state.matches)
+    );
+
     // Check full online status changes
     this.isAppOnline = onlineStatusService.isOnline;
     this.subscribe(onlineStatusService.onlineStatus$, status => {