From ed263726dc1e95ee0ea5045e20bc5cc7eb2a9069 Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Tue, 5 May 2020 12:09:50 +0200
Subject: [PATCH] Fix styling of rows, and fields with long text

---
 src/JSONNode.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index b39a5a5..1d6dab7 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -264,8 +264,9 @@
 
     .header,
     .contents {
-      display: inline-flex;
+      display: table;
       flex-direction: row;
+
       line-height: $line-height;
     }
 
@@ -295,7 +296,7 @@
 
   .key,
   .value {
-    display: flex;
+    display: table-cell;
 
     line-height: $line-height;
     min-width: 16px;
@@ -303,7 +304,7 @@
     padding: 0 $input-padding;
     outline: none;
     border-radius: 1px;
-    vertical-align: middle;
+    vertical-align: top;
 
     &:focus {
       box-shadow: 0 0 3px 1px #008fd5;
@@ -311,15 +312,16 @@
     }
   }
 
-  // FIXME: there is whitespace added around the separator in the HTML
   .separator,
   .delimiter {
-    display: flex;
-    vertical-align: middle;
+    display: table-cell;
+    vertical-align: top;
     color: $gray;
   }
 
   .tag {
+    display: table-cell;
+    vertical-align: top;
     border: none;
     font-size: $font-size-small;
     font-family: $font-family-menu;