fix: spec list scrolling and default category sort order (#10)

The spec list wasn't scrollable because the Angular host element
wasn't participating in the sidebar's flex layout. Added :host styles
and min-height: 0 so overflow can take effect. Also added a keyvalue
comparator to pin the 'default' category to the top of the list.

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>

Author: corvid-agent

src/app/components/spec-list/spec-list.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="suite-scroll-area">
-    @for (entry of store.suites() | keyvalue; track entry.key) {
+    @for (entry of store.suites() | keyvalue:suiteOrder; track entry.key) {
       <div class="suite-group">
         <button
           class="suite-header"

src/app/components/spec-list/spec-list.scss

@@ -1,7 +1,15 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
 .spec-list {
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   padding: 12px;
 }

src/app/components/spec-list/spec-list.ts

@@ -80,6 +80,13 @@ export class SpecListComponent {
     return this.collapsedSuites().has(suiteName);
   }
 
+  /** Comparator for keyvalue pipe: 'default' first, then alphabetical */
+  suiteOrder = (a: { key: string }, b: { key: string }): number => {
+    if (a.key === 'default') return -1;
+    if (b.key === 'default') return 1;
+    return a.key.localeCompare(b.key);
+  };
+
   /** Extract a one-line preview from the spec body */
   getPreview(spec: Spec): string {
     if (!spec.body) return 'No description';