Only show validation error on parent when collapsed

src/components/JSONNode.scss

@@ -238,5 +238,5 @@ div.empty {
 
 .validation-error {
   color: $warning-color;
-  padding-left: $input-padding;
+  padding: 0 $input-padding;
 }

src/components/JSONNode.svelte

@@ -378,15 +378,16 @@
         <div class="delimiter">[</div>
         <button class="tag" on:click={handleExpand}>{value.length} items</button>
         <div class="delimiter">]</div>
-      {/if}
         {#if validationError}
           <!-- FIXME: implement proper tooltip -->
-        <div 
+          <button
             class='validation-error' 
             title={validationError.isChildError ? 'Contains invalid items' : validationError.message}
+            on:click={handleExpand}
           >
             <Icon data={faExclamationTriangle} />
-        </div>
+          </button>
+        {/if}
       {/if}
     </div>
     {#if expanded}
@@ -456,15 +457,16 @@
         <span class="delimiter"> &#123;</span>
         <button class="tag" on:click={handleExpand}>{Object.keys(value).length} props</button>
         <span class="delimiter">&rbrace;</span>
-      {/if}
         {#if validationError}
           <!-- FIXME: implement proper tooltip -->
-        <div 
+          <button 
             class='validation-error' 
             title={validationError.isChildError ? 'Contains invalid properties' : validationError.message}
+            on:click={handleExpand}
           >
             <Icon data={faExclamationTriangle} />
-        </div>
+          </button>
+        {/if}
       {/if}
     </div>
     {#if expanded}