From 6f2926726674bd6128bcb5f8e744eb6411b6e6f2 Mon Sep 17 00:00:00 2001
From: Zaid Abdulla <zaid@genieacs.com>
Date: Wed, 29 Jun 2022 11:07:42 -0700
Subject: [PATCH] Fix HTML Quirks mode issues

---
 ui/css/app.css         | 19 ++++++++++++++++---
 ui/drawer-component.ts |  4 ++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/ui/css/app.css b/ui/css/app.css
index cb1a44e..a879b68 100644
--- a/ui/css/app.css
+++ b/ui/css/app.css
@@ -87,7 +87,7 @@ i {
 }
 
 body {
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
 }
@@ -169,6 +169,7 @@ body {
 
         & input {
           width: 100%;
+          box-sizing: border-box;
           padding: 0.3em;
           margin-top: 0.3em;
           margin-bottom: 0.3em;
@@ -291,6 +292,7 @@ body {
     & > img {
       margin: 10px;
       height: 56px;
+      vertical-align: top;
     }
 
     & > .version {
@@ -581,6 +583,7 @@ span.na {
 .all-parameters {
   & > input {
     font-family: monospace;
+    font-size: 14px;
     margin-bottom: 2px;
     padding: 4px;
     width: 700px;
@@ -588,6 +591,10 @@ span.na {
 
   & > .parameter-list {
     font-family: monospace;
+    font-size: 14px;
+    & button {
+      font-size: 16px;
+    }
     overflow-y: scroll;
     height: 200px;
 
@@ -725,6 +732,7 @@ span.long-text-overflowed {
 
 textarea.long-text {
   font-family: monospace;
+  font-size: 14px;
   min-width: 10vw;
   min-height: 10vh;
 }
@@ -746,8 +754,7 @@ span.parameter-value {
 }
 
 .icon {
-  display: inline-block;
-  vertical-align: middle;
+  display: block;
   width: 1em;
   height: 1em;
   fill: none;
@@ -797,3 +804,9 @@ span.parameter-value {
     background-color: #b12d5c;
   }
 }
+
+/* To keep consistent style after changing from Quirks to Standards mode */
+td,
+th {
+  line-height: normal;
+}
diff --git a/ui/drawer-component.ts b/ui/drawer-component.ts
index 03bd9ff..f6f9d64 100644
--- a/ui/drawer-component.ts
+++ b/ui/drawer-component.ts
@@ -388,7 +388,7 @@ const component: ClosureComponent = (): Component => {
       function repositionNotifications(): void {
         let top = 10;
         for (const c of notificationElements as VnodeDOM[]) {
-          (c.dom as HTMLDivElement).style.top = `${top}`;
+          (c.dom as HTMLDivElement).style.top = `${top}px`;
           top += (c.dom as HTMLDivElement).offsetHeight + 10;
         }
       }
@@ -408,7 +408,7 @@ const component: ClosureComponent = (): Component => {
           for (const c of drawerElement.children)
             height = Math.max(height, c.dom.offsetTop + c.dom.offsetHeight);
         }
-        drawerElement.dom.style.height = height;
+        drawerElement.dom.style.height = height + "px";
       }
 
       if (stagingElements.length + queueElements.length) {