feat: sort and space cross-reference lists on /content/detail

The Cross References widget renders comma-separated identifier lists
(RefSeq, ENSEMBL, COSMIC, ...). Two issues on the wider website detail
card: the lists came back unsorted and the commas were spaced at 2px
which made the rows visually run together.

- Sort each database group's identifiers naturally in CrossReferences-
  Component.crossReferences (localeCompare with numeric: true so
  RefSeq_2 sorts before RefSeq_10).
- detail.component.scss overrides ::ng-deep cr-cross-references
  composition-container with a roomier line-height (1.7) and 8px
  comma margins. The pathway-browser's compact 2px defaults are
  unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: adamjohnwright

projects/pathway-browser/src/app/details/common/cross-references/cross-references.component.ts

@@ -20,7 +20,16 @@ export class CrossReferencesComponent {
 
     if (this._crossReferences().length == 0) return new Map<string, DatabaseIdentifier[]>();
     const crossRefs = [...this._crossReferences()];
-    return this.entity.getGroupedData(crossRefs, ref => ref.databaseName);
+    const grouped = this.entity.getGroupedData(crossRefs, ref => ref.databaseName);
+    // Sort the identifiers within each database group so e.g. RefSeq IDs
+    // come out in stable, human-friendly order. numeric: true keeps
+    // "NM_000546.5" before "NM_000546.10" instead of lexicographic.
+    for (const list of grouped.values()) {
+      list.sort((a, b) =>
+        a.identifier.localeCompare(b.identifier, undefined, { numeric: true, sensitivity: 'base' }),
+      );
+    }
+    return grouped;
   });
 
   constructor(private entity: EntityService) {

projects/website-angular/src/app/content/detail/detail.component.scss

@@ -83,6 +83,19 @@
     }
   }
 
+  // Cross references are dense lists of comma-separated identifiers
+  // (RefSeq, ENSEMBL, COSMIC, ...); the pathway-browser uses 2px margins
+  // for the panel, but the wider website detail card benefits from more
+  // breathing room and stable line wrapping.
+  cr-cross-references .composition-container {
+    line-height: 1.7;
+    column-gap: 0;
+
+    > span.margin-right {
+      margin-right: 8px;
+    }
+  }
+
   // Double the ID selector to beat Angular's encapsulated
   // #details[_ngcontent-xxx] specificity (0,2,0) with (0,2,1)
   #details#details {