From 627b106e1860d912c21540ade8df134721ba6fb2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Wed, 13 Apr 2022 14:01:56 -0700
Subject: [PATCH] Make input select/textfield work better when bad REM defined
 (#219)

---
 src/components/ewt-select.ts    | 11 ++++++++++-
 src/components/ewt-textfield.ts | 11 ++++++++++-
 src/styles.ts                   |  2 ++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/ewt-select.ts b/src/components/ewt-select.ts
index 25bd95d..6f390f1 100644
--- a/src/components/ewt-select.ts
+++ b/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);
diff --git a/src/components/ewt-textfield.ts b/src/components/ewt-textfield.ts
index dae1d73..6ecc319 100644
--- a/src/components/ewt-textfield.ts
+++ b/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);
diff --git a/src/styles.ts b/src/styles.ts
index 7e8382f..58c1e41 100644
--- a/src/styles.ts
+++ b/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 {