Add sortable track views and fix chart alignment/export readability

package.json

@@ -1,7 +1,7 @@
 {
   "name": "keybpmmap",
   "private": true,
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -534,8 +534,13 @@ input[type='checkbox'] {
 }
 
 .track-action-button {
-  padding: 0.45rem 0.8rem;
-  font-size: 0.82rem;
+  padding: 0.32rem 0.58rem;
+  font-size: 0.74rem;
+  white-space: nowrap;
+}
+
+.scope-track-table .track-actions {
+  flex-wrap: nowrap;
 }
 
 .scope-track-table-wrapper {
@@ -566,6 +571,53 @@ input[type='checkbox'] {
   letter-spacing: 0.04em;
 }
 
+.scope-track-sort-button {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.scope-track-sort-button:hover,
+.scope-track-sort-button:focus-visible {
+  color: #cbd5e1;
+}
+
+.selected-region-sort-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: #ffffff4f;
+}
+
+.selected-region-sort-button {
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 999px;
+  padding: 0.25rem 0.52rem;
+  font: inherit;
+  font-size: 0.72rem;
+  color: #94a3b8;
+  background: rgba(148, 163, 184, 0.08);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.selected-region-sort-button:hover,
+.selected-region-sort-button:focus-visible {
+  color: #cbd5e1;
+}
+
 .scope-track-table tbody td {
   color: #cbd5e1;
 }