fix my views search box

Author: sei-aschlackman

src/app/components/home-app/view-list/view-list.component.html

@@ -10,34 +10,31 @@
     </div>
     <span class="views-title text">My Views</span>
     @if (canCreate$ | async) {
-      <button
-        mat-icon-button
-        matTooltip="Add New View"
-        (click)="create()"
-        >
+      <button mat-icon-button matTooltip="Add New View" (click)="create()">
         <mat-icon class="mdi-24px" fontIcon="mdi-plus-circle"> </mat-icon>
       </button>
     }
-    <div class="searchBox d-flex align-items-center">
-      <mat-icon
-        class="text"
-        style="transform: scale(0.85); margin-right: 5px"
-        svgIcon="ic_magnify_search"
-      ></mat-icon>
-      <mat-form-field style="width: 320px">
+    <div class="searchBox my-1">
+      <mat-form-field style="width: 320px" subscriptSizing="dynamic">
+        <mat-icon
+          matPrefix
+          class="text"
+          style="transform: scale(0.85); margin-right: 5px"
+          svgIcon="ic_magnify_search"
+        ></mat-icon>
         <input
           matInput
           [(ngModel)]="filterString"
           (keyup)="applyFilter($event.target.value)"
           placeholder="Search"
-          />
+        />
         @if (filterString !== '') {
           <button
             mat-icon-button
             matSuffix
             (click)="clearFilter()"
             title="Clear Search"
-            >
+          >
             <mat-icon
               style="transform: scale(0.85)"
               svgIcon="ic_cancel_circle"
@@ -49,9 +46,7 @@
   </div>
 
   @if (isLoading) {
-    <mat-card
-      class="d-flex justify-content-center align-items-center"
-      >
+    <mat-card class="d-flex justify-content-center align-items-center">
       <mat-progress-spinner color="primary" mode="indeterminate">
       </mat-progress-spinner>
     </mat-card>
@@ -63,7 +58,7 @@
     matSort
     matSortActive="name"
     matSortDirection="asc"
-    >
+  >
     <!--- Note that these columns can be defined in any order.
     The actual rendered columns are set as a property on the row definition" -->
     <!-- Name Column -->
@@ -77,25 +72,23 @@
             [routerLink]="['/view', element.id]"
             [queryParams]="{ teamId: asdf }"
             >{{ element.name }}</a
-            >
-          </div>
-        </mat-cell>
-      </ng-container>
+          >
+        </div>
+      </mat-cell>
+    </ng-container>
 
-      <!-- Name Column -->
-      <ng-container matColumnDef="description">
-        <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
-        <mat-cell *matCellDef="let element">
-          <div class="description-text">{{ element.description }}</div>
-        </mat-cell>
-      </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="description">
+      <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
+      <mat-cell *matCellDef="let element">
+        <div class="description-text">{{ element.description }}</div>
+      </mat-cell>
+    </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-    @if (dataSource.filteredData.length === 0) {
-      <div class="text no-results">
-        No results found
-      </div>
-    }
-  </div>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+  @if (dataSource.filteredData.length === 0) {
+    <div class="text no-results">No results found</div>
+  }
+</div>