From c03353845e98d74d4b9f8e68b7ae5215576d30fd Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Mon, 27 Apr 2020 13:38:55 +0200
Subject: [PATCH] Styling fixes

---
 src/JSONNode.svelte | 31 +++++++++++++++++++++++++------
 src/styles.scss     |  5 +++--
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index f2fbe44..16c280d 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -108,18 +108,31 @@
     font-family: $font-family;
     font-size: $font-size;
     color: $black;
-    line-height: $line-height;
+
+    .header {
+      position: relative;
+    }
 
     .header,
     .contents {
       display: inline-flex;
       flex-direction: row;
       align-items: center;
+      line-height: $line-height;
+    }
+
+    .contents {
+      padding-left: $line-height ; // must be the same as the width of the expand button
+    }
+
+    .footer {
+      padding-left: $line-height + $input-padding; // must be the same as the width of the expand button
     }
   }
 
   .expand {
     position: relative;
+    top: 2px;
     width: $line-height;
     height: $line-height;
     padding: 0;
@@ -164,9 +177,15 @@
     color: white;
     background: $light-gray;
     border-radius: 2px;
-    padding: 2px 4px;
+    padding: 1px 4px;
     margin: 0 5px;
     cursor: pointer;
+    position: relative;
+    top: 1px;
+
+    &:hover {
+      background: lighten($light-gray, 5%);
+    }
   }
 
   .items,
@@ -253,14 +272,14 @@
         >
           {escapedKey}
         </div>
-        <span class="separator">:</span>
+        <div class="separator">:</div>
       {/if}
       {#if expanded}
-        <span class="delimiter">[</span>
+        <div class="delimiter">[</div>
       {:else}
-        <span class="delimiter">[</span>
+        <div class="delimiter">[</div>
         <button class="tag" on:click={() => expanded = true}>{value.length} items</button>
-        <span class="delimiter">]</span>
+        <div class="delimiter">]</div>
       {/if}
     </div>
     {#if expanded}
diff --git a/src/styles.scss b/src/styles.scss
index 1032839..c8030c0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,7 +5,6 @@ $font-size-small: 8pt;
 $font-family-menu: arial, "sans-serif";
 $font-size-icon: 16px;
 
-$line-height: 20px;
 
 $white: #fff;
 $black: #1A1A1A;
@@ -27,5 +26,7 @@ $gray-icon: $gray;
 $light-gray: #c0c0c0;
 $input-padding: 5px;
 
-$indentation-width: 24px;
+
+$line-height: 18px;
+$indentation-width: 18px;
 $input-padding: 5px;
\ No newline at end of file