mat-toolbar is not displaying right on mobile

Question

I'm building and angular site and I'm trying to add a toolbar for navigation it's looking good on desktop but on mobile it's only showing a part of it. on desktop:

on mobile:

when tilted:

css:

.spacer{
    flex: 1 1 auto;
}

this is my app.component.html:

  <mat-toolbar style="color: honeydew; background-color:rgb(43, 44, 44);" lang="en" dir="ltr" class="mat-elevation-z8">
    <br>
    <button [routerLink]="['']" routerLinkActive="active"  style="background-color: rgb(43, 44, 44);">
      <mat-icon>home</mat-icon>
    </button>
    <H4>MaxProfit.TEB</H4>
    <div class="spacer"> </div>
    <a mat-button [routerLink] = "['/signup']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <mat-icon>input</mat-icon><br>הרשמה</a>
    <a mat-button [routerLink] = "['/login']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>account_circle</mat-icon><br>התחברות</a>
    <a mat-button [routerLink] = "['/guidelines']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>check_circle_outline</mat-icon><br>תנאי שימוש</a>
    <a mat-button [routerLink] = "['/academy']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <mat-icon>border_color</mat-icon><br>אקדמיה</a>
    <a mat-button [routerLink] = "['/meta-trader']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>attach_money</mat-icon><br>MetaTrader4</a>
    <a mat-button [routerLink] = "['/journey']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon> directions_walk</mat-icon><br>Journey</a>
    <a mat-button [routerLink] = "['/reviews']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>feedback</mat-icon><br>ביקורות</a>
    <a mat-button [routerLink] = "['/feedback']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>message</mat-icon><br>משוב</a>
</mat-toolbar>

what am I doing wrong? thanks!