Adapt font size to small devices

2 files changed, 16 insertions, 2 deletions

diff --git a/public/main.css b/public/main.css
index fd5595f..fca717d 100644
--- a/public/main.css
+++ b/public/main.css
@@ -47,6 +47,20 @@ input {
   cursor: pointer;
 }
 
+/* Box sizing */
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/* Fix full width on small screens on chrome */
+body, .g-Form, .g-Play {
+  min-width: fit-content; 
+}
+
 /* Fonts */
 
 @font-face {
@@ -120,7 +134,7 @@ header {
   height: calc(100vh - var(--header-height));
   position: relative;
   font-family: chords;
-  font-size: var(--font-size-whale);
+  font-size: 15vw;
   overflow-x: visible;
 }
 
diff --git a/src/view/form.ts b/src/view/form.ts
index 67df0d4..77a8cb7 100644
--- a/src/view/form.ts
+++ b/src/view/form.ts
@@ -59,7 +59,7 @@ type LabelInputParams = {
 
 function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
   return h('label',
-    { className },
+    className !== undefined ? { className } : {},
     h('input', { type, name, checked, value }),
     label
   )