...vibing UI and fixing doc links

Fellowship/Web/Pages/Docs.razor

@@ -1,5 +1,6 @@
 @page "/docs"
 @using System.Text.RegularExpressions
+@inject IJSRuntime JS
 
 <PageTitle>Fellowship Docs</PageTitle>
 
@@ -31,12 +32,12 @@
                 {
                     var groupId = GetGroupId(group.Key);
                     <div class="sidebar-group">
-                        <a class="sidebar-group-title" href="@($"#{groupId}")">@group.Key</a>
+                        <a class="sidebar-group-title" href="@($"#{groupId}")" @onclick:preventDefault @onclick="() => ScrollTo(groupId)">@group.Key</a>
                         <div class="sidebar-items">
                             @foreach (var doc in group)
                             {
                                 var docId = GetDocId(doc);
-                                <a class="sidebar-item" href="@($"#{docId}")" title="@doc.FileName">
+                                <a class="sidebar-item" href="@($"#{docId}")" @onclick:preventDefault @onclick="() => ScrollTo(docId)" title="@doc.FileName">
                                     <span class="sidebar-item-badge @GetTypeClass(doc)"></span>
                                     @GetDisplayName(doc)
                                 </a>
@@ -184,6 +185,11 @@
         activeFilter = null;
     }
 
+    private async Task ScrollTo(string id)
+    {
+        await JS.InvokeVoidAsync("scrollToFragment", id);
+    }
+
     private void FilterAll() { activeFilter = null; }
     private void FilterSkills() { activeFilter = activeFilter == "Skill" ? null : "Skill"; }
     private void FilterDebuffs() { activeFilter = activeFilter == "Debuff" ? null : "Debuff"; }