Be a bit more careful with the nesting of anchors and list items.

Browsers cope with weird nestings mostly fine, but there's no upside for us in testing that.

2 files changed, 6 insertions, 5 deletions

diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index c73340f..4f908d2 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -2,13 +2,13 @@
   let { id, name, active, hasUnreads } = $props();
 </script>
 
-<a href="/ch/{id}">
-  <li class:active>
+<li class:active>
+  <a href="/ch/{id}">
     {#if hasUnreads}
       <span class="badge has-unreads">❦</span>
     {:else}
       <span class="badge has-no-unreads">¶</span>
     {/if}
     <span>{name}</span>
-  </li>
-</a>
+  </a>
+</li>
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 5e5e16a..c6aab6a 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -4,6 +4,8 @@
 }
 
 .list-nav a {
+  display: block;
+  padding: 0.5rem;
   text-decoration: none;
 }
 
@@ -12,7 +14,6 @@
 }
 
 .list-nav li {
-  padding: 0.5rem;
   border-radius: 0.5rem;
   border: 1px solid var(--colour-navbar-border);
   margin: 0.25rem;