Make input select/textfield work better when bad REM defined (#219)

src/components/ewt-select.ts

@@ -1,5 +1,6 @@
 import { SelectBase } from "@material/mwc-select/mwc-select-base";
 import { styles } from "@material/mwc-select/mwc-select.css";
+import { css } from "lit";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,7 +9,15 @@ declare global {
 }
 
 export class EwtSelect extends SelectBase {
-  static override styles = [styles];
+  static override styles = [
+    styles,
+    // rem -> em conversion
+    css`
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+  ];
 }
 
 customElements.define("ewt-select", EwtSelect);

src/components/ewt-textfield.ts

@@ -1,5 +1,6 @@
 import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
 import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { css } from "lit";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,7 +9,15 @@ declare global {
 }
 
 export class EwtTextfield extends TextFieldBase {
-  static override styles = [styles];
+  static override styles = [
+    styles,
+    // rem -> em conversion
+    css`
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+  ];
 }
 
 customElements.define("ewt-textfield", EwtTextfield);

src/styles.ts

@@ -20,6 +20,8 @@ export const dialogStyles = css`
     --mdc-typography-body1-line-height: 1.5em;
     --mdc-typography-button-font-size: 0.875em;
     --mdc-typography-button-line-height: 2.25em;
+    --mdc-typography-subtitle1-font-size: 1em;
+    --mdc-typography-subtitle1-line-height: 1.75em;
   }
 
   a {