From 0fc46d222065ad8ae25cde5ab2dd92b7b1b5689d Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Sun, 20 Mar 2022 10:53:53 -0500
Subject: [PATCH] fix table of details navbar

---
 pyscriptjs/src/ComponentDetailsNav.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/pyscriptjs/src/ComponentDetailsNav.svelte b/pyscriptjs/src/ComponentDetailsNav.svelte
index 6da8b80..c5945c0 100644
--- a/pyscriptjs/src/ComponentDetailsNav.svelte
+++ b/pyscriptjs/src/ComponentDetailsNav.svelte
@@ -49,10 +49,14 @@
         right: 0;
         transition: right 1s;
     }
+
+    .properties{
+      font-family: 'Courier New', monospace;
+    }
     
 </style>
 
-<nav id="component-detail-bar" class="absolute z-10 h-full mb-6 pin-y bg-white shadow-md rightsidebar" class:rightsidebar-inactive="{ !showMe }" class:slide-right="{ showMe }">
+<nav id="component-detail-bar" class="properties absolute z-10 h-full mb-6 pin-y bg-white shadow-md rightsidebar" class:rightsidebar-inactive="{ !showMe }" class:slide-right="{ showMe }">
   <div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
       <button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
           <Fa icon={faArrowRight} />
@@ -62,19 +66,19 @@
       </div>
   </div>
   <form>
-  <table class="table-fixed">
+  <table class="table-fixed border-collapse table-auto w-full text-sm">
     <thead>
       <tr>
-        <th class="text-left">Property</th>
-        <th class="text-right">Value</th>
+        <th class="text-left border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">Property</th>
+        <th class="text-center border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">Value</th>
       </tr>
     </thead>
     <tbody>
       
     {#each $currentComponentDetails as attribute}
-    <tr>
-        <td>{attribute.key}</td>
-        <td> <input  class="text-right" placeholder={attribute.value} value="{attribute.value}"></td>
+    <tr class="border">
+        <td class="border bg-gray-300">{attribute.key}</td>
+        <td class="border"> <input  class="text-center" placeholder={attribute.value} value="{attribute.value}"></td>
       </tr>
     {/each}