ngStyle

src/app/shared/top-menu/top-menu.component.html

@@ -5,7 +5,7 @@
 
     {{title != undefined ? title : 'Quack'}}
 
-    <span>
+    <span [ngStyle]="{float: 'right',padding: '5px;'}">
         <mat-form-field>
             <mat-label>Search users</mat-label>
             <input matInput type="text" #search>

src/app/shared/top-menu/top-menu.component.scss

@@ -10,10 +10,10 @@ mat-toolbar {
         aspect-ratio: 1;
     }
 
-    span {
-        float: right;
-        padding: 5px;
-    }
+    // span {
+    //     float: right;
+    //     padding: 5px;
+    // }
 
     box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4);
 }

src/app/shared/top-menu/top-menu.component.ts

@@ -3,20 +3,19 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { NgIf } from '@angular/common';
+import { CommonModule, NgIf } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-top-menu',
   standalone: true,
-  imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf, RouterModule],
+  imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf, RouterModule, CommonModule],
   templateUrl: './top-menu.component.html',
   styleUrl: './top-menu.component.scss'
 })
 export class TopMenuComponent {
   @Input() title?: String;
   @Output() side: EventEmitter<Boolean> = new EventEmitter<Boolean>();
-
   openSide() {
     this.side.emit(true);
   }