fix: update tab hover

Update bottom border hover to charcoal-100, using class:hover syntax so that
the hover doesn't override the active border color (confirmed with Mairin).
I also moved the px-4 to the href and added a py-2. This doesn't affect the
visuals at all, but gives a bigger area that you can click on to activate
the tab.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/ui/DetailsTab.svelte

@@ -8,11 +8,12 @@ let baseURL = $router.path.substring(0, $router.path.lastIndexOf('/'));
 </script>
 
 <div
-  class="px-4 pb-2 border-b-[3px] border-charcoal-700 whitespace-nowrap hover:cursor-pointer hover:border-purple-500"
-  class:border-purple-500="{$router.path === baseURL + '/' + url}">
+  class="pb-2 border-b-[3px] border-charcoal-700 whitespace-nowrap hover:cursor-pointer"
+  class:border-purple-500="{$router.path === baseURL + '/' + url}"
+  class:hover:border-charcoal-100="{$router.path !== baseURL + '/' + url}">
   <a
     href="{baseURL}/{url}"
-    class="text-gray-600 no-underline"
+    class="px-4 py-2 text-gray-600 no-underline"
     class:text-white="{$router.path === baseURL + '/' + url}"
     aria-controls="open-tabs-list-{url}-panel"
     id="open-tabs-list-{url}-link">