fix: restore form field appearance and update stale MDC CSS class selectors

Agent-Logs-Url: https://github.com/EhTagTranslation/Editor/sessions/4503357b-b760-43a1-93f6-03acc3141ec1

Co-authored-by: OpportunityLiu <13471233+OpportunityLiu@users.noreply.github.com>

Author: Copilot

src/browser/app/app.module.ts

@@ -13,7 +13,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -82,6 +82,10 @@ import { environment } from '../environments/environment';
     providers: [
         ehHttpInterceptorProvider,
         TitleService,
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },
+        },
         {
             provide: MatPaginatorIntl,
             useFactory: () => {

src/browser/app/editor/editor.component.scss

@@ -122,7 +122,7 @@ mat-card-subtitle {
 .ns-option {
   user-select: none;
 
-  &.mat-option {
+  &.mat-mdc-option {
     line-height: 1.5em !important;
   }
 

src/browser/app/list/list.component.scss

@@ -56,7 +56,7 @@ header {
     margin-top: 2px;
   }
 
-  > mat-chip-list {
+  > mat-chip-set {
     margin: 0 8px;
   }
 
@@ -95,8 +95,8 @@ section {
         }
       }
 
-      .mat-header-cell:not(:last-child),
-      .mat-cell:not(:last-child) {
+      .mat-mdc-header-cell:not(:last-child),
+      .mat-mdc-cell:not(:last-child) {
         padding-right: 8px;
       }