Follow-up fixes for the styling page

Fixes the following issues with the styling page:
* The table header background wasn't themed correctly.
* The filters looked weird on smaller screens.
* Filtering was case-sensitive.

Author: crisbeto

material.angular.io/src/app/pages/component-viewer/token-table.scss

@@ -10,7 +10,7 @@ thead {
   position: sticky;
   top: 0;
   left: 0;
-  background: #fdfbff;
+  background: var(--mat-sys-surface);
   z-index: 1;
 }
 
@@ -19,10 +19,8 @@ thead {
   align-items: center;
   margin: 24px 0;
   width: 100%;
-}
-
-.filters mat-form-field {
-  margin-right: 16px;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 
 .name-field {

material.angular.io/src/app/pages/component-viewer/token-table.ts

@@ -38,11 +38,11 @@ export class TokenTable {
   protected typeFilter = signal<TokenType | null>(null);
   protected types: TokenType[] = ['base', 'color', 'typography', 'density'];
   protected filteredTokens = computed(() => {
-    const name = this.nameFilter().trim();
+    const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
 
     return this.tokens().filter(token =>
-      (!name || token.overridesName.includes(name)) &&
+      (!name || token.overridesName.toLowerCase().includes(name)) &&
       (!typeFilter || token.type === typeFilter));
   });