From c35f0396b7181e7c3fac084e6d6e183e8323de3d Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Sat, 22 Aug 2026 20:03:56 +0900
Subject: [PATCH] web: match the height of the not resolved vs resolved
 skeletons of repo index page

Signed-off-by: dawn <dawn@tangled.org>
---
 web/boneyard.config.json                      |   3 +
 ...po-repochrome--skeleton-fixture.bones.json |  69 ++++++++
 ...dexview--panel-skeleton-fixture.bones.json | 132 ++++++++++-----
 ...repoindexview--skeleton-fixture.bones.json | 157 ++++++++++++------
 .../components/repo/RepoChrome.stories.svelte |  62 +++++++
 web/src/lib/components/repo/RepoHeader.svelte |  48 +++---
 .../repo/RepoIndexPanelSkeleton.svelte        |   6 +
 .../components/repo/RepoIndexSkeleton.svelte  |   7 +
 .../repo/RepoIndexView.stories.svelte         |  95 +++++++----
 .../lib/components/repo/RepoIndexView.svelte  |  11 +-
 .../components/repo/RepoReadmeSkeleton.svelte |   6 +
 web/src/lib/components/ui/Tabs.stories.svelte |   1 +
 web/src/lib/components/ui/Tabs.svelte         |   4 +-
 .../routes/[handle]/[repo]/+layout@.svelte    |  14 +-
 web/src/routes/[handle]/[repo]/+page.svelte   |   5 +-
 15 files changed, 466 insertions(+), 154 deletions(-)
 create mode 100644 web/src/lib/bones/repo-repochrome--skeleton-fixture.bones.json
 create mode 100644 web/src/lib/components/repo/RepoChrome.stories.svelte
 create mode 100644 web/src/lib/components/repo/RepoIndexPanelSkeleton.svelte
 create mode 100644 web/src/lib/components/repo/RepoIndexSkeleton.svelte
 create mode 100644 web/src/lib/components/repo/RepoReadmeSkeleton.svelte

diff --git a/web/boneyard.config.json b/web/boneyard.config.json
index a82148fa8..6af048c55 100644
--- a/web/boneyard.config.json
+++ b/web/boneyard.config.json
@@ -73,6 +73,9 @@
 		"repo-repocard--with-star-button": {
 			"route": "/iframe.html?id=repo-repocard--with-star-button&viewMode=story"
 		},
+		"repo-repochrome--skeleton-fixture": {
+			"route": "/iframe.html?id=repo-repochrome--skeleton-fixture&viewMode=story"
+		},
 		"repo-repoheader--full-metadata": {
 			"route": "/iframe.html?id=repo-repoheader--full-metadata&viewMode=story"
 		},
diff --git a/web/src/lib/bones/repo-repochrome--skeleton-fixture.bones.json b/web/src/lib/bones/repo-repochrome--skeleton-fixture.bones.json
new file mode 100644
index 000000000..24890616e
--- /dev/null
+++ b/web/src/lib/bones/repo-repochrome--skeleton-fixture.bones.json
@@ -0,0 +1,69 @@
+{
+	"breakpoints": {
+		"375": {
+			"name": "repo-repochrome--skeleton-fixture",
+			"viewportWidth": 375,
+			"width": 375,
+			"height": 152,
+			"bones": [
+				[4.2667, 9, 6.9333, 26, "50%"],
+				[30.0542, 11, 15.0667, 20, 4],
+				[4.2667, 45, 84.7208, 15, 4],
+				[4.2667, 71, 44.4, 34, 4, true, 15, true],
+				[4.2667, 72, 33.6417, 32, "4px 0px 0px 4px"],
+				[37.6417, 72, 11.025, 32, "0px 4px 4px 0px"],
+				[50.8, 71, 44.9333, 34, 4, true, 15, true],
+				[50.8, 72, 36.25, 32, "4px 0px 0px 4px"],
+				[86.7833, 72, 8.95, 32, "0px 4px 4px 0px"],
+				[4.2667, 121, 32.4083, 31, "4px 4px 0px 0px"],
+				[42.275, 126, 23.1667, 21, 4],
+				[75.575, 126, 22.5458, 21, 4]
+			]
+		},
+		"768": {
+			"name": "repo-repochrome--skeleton-fixture",
+			"viewportWidth": 768,
+			"width": 768,
+			"height": 117,
+			"bones": [
+				[2.0833, 9, 3.3854, 26, "50%"],
+				[14.6749, 11, 7.3568, 20, 4],
+				[70.7072, 8, 13.4501, 34, 4, true, 15, true],
+				[70.7072, 9, 8.197, 32, "4px 0px 0px 4px"],
+				[78.774, 9, 5.3833, 32, "0px 4px 4px 0px"],
+				[85.199, 8, 12.7177, 34, 4, true, 15, true],
+				[85.199, 9, 8.4778, 32, "4px 0px 0px 4px"],
+				[93.5465, 9, 4.3701, 32, "0px 4px 4px 0px"],
+				[2.0833, 52, 41.3676, 15, 4],
+				[2.0833, 86, 15.8244, 31, "4px 4px 0px 0px"],
+				[20.6421, 91, 11.3118, 21, 4],
+				[36.9019, 91, 11.0087, 21, 4],
+				[52.8585, 91, 11.0819, 21, 4],
+				[68.8883, 91, 10.2743, 21, 4]
+			]
+		},
+		"1024": {
+			"name": "repo-repochrome--skeleton-fixture",
+			"viewportWidth": 1024,
+			"width": 1024,
+			"height": 117,
+			"bones": [
+				[1.5625, 9, 2.5391, 26, "50%"],
+				[11.0062, 11, 5.5176, 20, 4],
+				[78.0304, 8, 10.0876, 34, 4, true, 15, true],
+				[78.0304, 9, 6.1478, 32, "4px 0px 0px 4px"],
+				[84.0805, 9, 4.0375, 32, "0px 4px 4px 0px"],
+				[88.8992, 8, 9.5383, 34, 4, true, 15, true],
+				[88.8992, 9, 6.3583, 32, "4px 0px 0px 4px"],
+				[95.1599, 9, 3.2776, 32, "0px 4px 4px 0px"],
+				[1.5625, 52, 31.0257, 15, 4],
+				[1.5625, 86, 11.8683, 31, "4px 4px 0px 0px"],
+				[15.4816, 91, 8.4839, 21, 4],
+				[27.6764, 91, 8.2565, 21, 4],
+				[39.6439, 91, 8.3115, 21, 4],
+				[51.6663, 91, 7.7057, 21, 4]
+			]
+		}
+	},
+	"_hash": "ebc7985edff8d09e688593fa300ef27b"
+}
diff --git a/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json b/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
index 0b87a3fdd..46267d674 100644
--- a/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
+++ b/web/src/lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json
@@ -32,9 +32,9 @@
 			"name": "repo-repoindexview--panel-skeleton-fixture",
 			"viewportWidth": 736,
 			"width": 736,
-			"height": 517,
+			"height": 870,
 			"bones": [
-				[0, 0, 100, 517, 4, true, 15, true],
+				[0, 0, 100, 870, 4, true, 15, true],
 				[0.1359, 1, 99.7283, 8, "4px 4px 0px 0px"],
 				[2.3098, 25, 26.087, 36, 4],
 				[29.4837, 25, 4.6196, 36, 4, true, 15, false],
@@ -43,7 +43,7 @@
 				[50.9023, 35, 2.1739, 16, 0],
 				[54.1631, 32, 29.0761, 24, 0],
 				[86.0925, 25, 11.5977, 36, 4],
-				[2.3098, 81, 47.1467, 419, 0, true, 2, false],
+				[2.3098, 81, 47.1467, 772, 0, true, 2, false],
 				[2.3098, 85, 10.7825, 21, 4],
 				[2.3098, 114, 9.4811, 21, 4],
 				[2.3098, 143, 7.1799, 21, 4],
@@ -54,33 +54,37 @@
 				[2.3098, 288, 14.5189, 21, 4],
 				[51.6304, 82, 15.6059, 20, 4],
 				[51.6304, 112, 21.7646, 17, 4],
-				[52.7174, 140, 7.8274, 15, 4],
-				[62.7187, 138, 7.337, 20, 4],
-				[72.7008, 140, 5.7235, 15, 4],
-				[79.5113, 136, 6.6003, 24, 4],
+				[51.6304, 136, 26.7939, 24, 4],
 				[51.6304, 178, 32.5853, 17, 4],
-				[52.7174, 206, 7.8274, 15, 4],
-				[62.7187, 204, 7.337, 20, 4],
-				[72.7008, 206, 5.7235, 15, 4],
-				[79.5113, 202, 6.6003, 24, 4],
+				[51.6304, 202, 26.7939, 24, 4],
 				[51.6304, 244, 23.6965, 17, 4],
 				[51.6304, 268, 26.7939, 24, 4],
-				[50.5435, 308, 47.1467, 83, 0, true, 1, false],
-				[51.6304, 326, 15.0773, 20, 4],
-				[51.6304, 354, 22.6053, 21, 4],
-				[50.5435, 391, 47.1467, 109, 0, true, 1, false],
-				[51.6304, 409, 10.8781, 20, 4],
-				[51.6304, 443, 5.7914, 17, 4],
-				[52.5815, 463, 5.87, 15, 4]
+				[51.6304, 310, 21.7646, 17, 4],
+				[51.6304, 334, 26.7939, 24, 4],
+				[51.6304, 376, 32.5853, 17, 4],
+				[51.6304, 400, 26.7939, 24, 4],
+				[51.6304, 442, 23.6965, 17, 4],
+				[51.6304, 466, 26.7939, 24, 4],
+				[51.6304, 508, 21.7646, 17, 4],
+				[51.6304, 532, 26.7939, 24, 4],
+				[51.6304, 574, 32.5853, 17, 4],
+				[51.6304, 598, 26.7939, 24, 4],
+				[51.6304, 640, 23.6965, 17, 4],
+				[51.6304, 664, 26.7939, 24, 4],
+				[51.6304, 706, 21.7646, 17, 4],
+				[51.6304, 730, 26.7939, 24, 4],
+				[50.5435, 770, 47.1467, 83, 0, true, 1, false],
+				[51.6304, 788, 15.0773, 20, 4],
+				[51.6304, 816, 22.6053, 21, 4]
 			]
 		},
 		"1024": {
 			"name": "repo-repoindexview--panel-skeleton-fixture",
 			"viewportWidth": 992,
 			"width": 992,
-			"height": 517,
+			"height": 870,
 			"bones": [
-				[0, 0, 100, 517, 4, true, 15, true],
+				[0, 0, 100, 870, 4, true, 15, true],
 				[0.1008, 1, 99.7984, 8, "4px 4px 0px 0px"],
 				[1.7137, 25, 19.3548, 36, 4],
 				[21.875, 25, 3.4274, 36, 4, true, 15, false],
@@ -89,7 +93,7 @@
 				[63.5726, 35, 1.6129, 16, 0],
 				[65.992, 32, 21.5726, 24, 0],
 				[89.6815, 25, 8.6048, 36, 4],
-				[1.7137, 81, 47.8831, 419, 0, true, 2, false],
+				[1.7137, 81, 47.8831, 772, 0, true, 2, false],
 				[1.7137, 85, 7.9999, 21, 4],
 				[1.7137, 114, 7.0344, 21, 4],
 				[1.7137, 143, 5.327, 21, 4],
@@ -100,26 +104,80 @@
 				[1.7137, 288, 10.7721, 21, 4],
 				[51.2097, 82, 11.5786, 20, 4],
 				[51.2097, 112, 16.1479, 17, 4],
-				[52.0161, 140, 5.8074, 15, 4],
-				[59.4364, 138, 5.4435, 20, 4],
-				[66.8426, 140, 4.2465, 15, 4],
-				[71.8955, 136, 4.897, 24, 4],
+				[51.2097, 136, 19.8793, 24, 4],
 				[51.2097, 178, 24.1762, 17, 4],
-				[52.0161, 206, 5.8074, 15, 4],
-				[59.4364, 204, 5.4435, 20, 4],
-				[66.8426, 206, 4.2465, 15, 4],
-				[71.8955, 202, 4.897, 24, 4],
+				[51.2097, 202, 19.8793, 24, 4],
 				[51.2097, 244, 17.5813, 17, 4],
 				[51.2097, 268, 19.8793, 24, 4],
-				[50.4032, 308, 47.8831, 83, 0, true, 1, false],
-				[51.2097, 326, 11.1864, 20, 4],
-				[51.2097, 354, 16.7717, 21, 4],
-				[50.4032, 391, 47.8831, 109, 0, true, 1, false],
-				[51.2097, 409, 8.0708, 20, 4],
-				[51.2097, 443, 4.2969, 17, 4],
-				[51.9153, 463, 4.3552, 15, 4]
+				[51.2097, 310, 16.1479, 17, 4],
+				[51.2097, 334, 19.8793, 24, 4],
+				[51.2097, 376, 24.1762, 17, 4],
+				[51.2097, 400, 19.8793, 24, 4],
+				[51.2097, 442, 17.5813, 17, 4],
+				[51.2097, 466, 19.8793, 24, 4],
+				[51.2097, 508, 16.1479, 17, 4],
+				[51.2097, 532, 19.8793, 24, 4],
+				[51.2097, 574, 24.1762, 17, 4],
+				[51.2097, 598, 19.8793, 24, 4],
+				[51.2097, 640, 17.5813, 17, 4],
+				[51.2097, 664, 19.8793, 24, 4],
+				[51.2097, 706, 16.1479, 17, 4],
+				[51.2097, 730, 19.8793, 24, 4],
+				[50.4032, 770, 47.8831, 83, 0, true, 1, false],
+				[51.2097, 788, 11.1864, 20, 4],
+				[51.2097, 816, 16.7717, 21, 4]
+			]
+		},
+		"1440": {
+			"name": "repo-repoindexview--panel-skeleton-fixture",
+			"viewportWidth": 1408,
+			"width": 1408,
+			"height": 870,
+			"bones": [
+				[0, 0, 100, 870, 4, true, 15, true],
+				[0.071, 1, 99.858, 8, "4px 4px 0px 0px"],
+				[1.2074, 25, 13.6364, 36, 4],
+				[15.4119, 25, 2.4148, 36, 4, true, 15, false],
+				[16.0511, 35, 1.1364, 16, 0],
+				[73.6961, 25, 18.1818, 36, 4, true, 15, false],
+				[74.3353, 35, 1.1364, 16, 0],
+				[76.0398, 32, 15.1989, 24, 0],
+				[92.7302, 25, 6.0625, 36, 4],
+				[1.2074, 81, 48.5085, 772, 0, true, 2, false],
+				[1.2074, 85, 5.6363, 21, 4],
+				[1.2074, 114, 4.9561, 21, 4],
+				[1.2074, 143, 3.7531, 21, 4],
+				[1.2074, 172, 4.0028, 21, 4],
+				[1.2074, 201, 3.6899, 21, 4],
+				[1.2074, 230, 7.4729, 21, 4],
+				[1.2074, 259, 5.8427, 21, 4],
+				[1.2074, 288, 7.5894, 21, 4],
+				[50.8523, 82, 8.1576, 20, 4],
+				[50.8523, 112, 11.377, 17, 4],
+				[50.8523, 136, 14.0059, 24, 4],
+				[50.8523, 178, 17.0332, 17, 4],
+				[50.8523, 202, 14.0059, 24, 4],
+				[50.8523, 244, 12.3868, 17, 4],
+				[50.8523, 268, 14.0059, 24, 4],
+				[50.8523, 310, 11.377, 17, 4],
+				[50.8523, 334, 14.0059, 24, 4],
+				[50.8523, 376, 17.0332, 17, 4],
+				[50.8523, 400, 14.0059, 24, 4],
+				[50.8523, 442, 12.3868, 17, 4],
+				[50.8523, 466, 14.0059, 24, 4],
+				[50.8523, 508, 11.377, 17, 4],
+				[50.8523, 532, 14.0059, 24, 4],
+				[50.8523, 574, 17.0332, 17, 4],
+				[50.8523, 598, 14.0059, 24, 4],
+				[50.8523, 640, 12.3868, 17, 4],
+				[50.8523, 664, 14.0059, 24, 4],
+				[50.8523, 706, 11.377, 17, 4],
+				[50.8523, 730, 14.0059, 24, 4],
+				[50.2841, 770, 48.5085, 83, 0, true, 1, false],
+				[50.8523, 788, 7.8813, 20, 4],
+				[50.8523, 816, 11.8164, 21, 4]
 			]
 		}
 	},
-	"_hash": "ee4ece9ccfb65f13e8a781ccce2181d7"
+	"_hash": "eac4b26d3df0309109bbc6c9a37f7c4c"
 }
diff --git a/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json b/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
index f3f95a4de..40ccdd150 100644
--- a/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
+++ b/web/src/lib/bones/repo-repoindexview--skeleton-fixture.bones.json
@@ -46,9 +46,9 @@
 			"name": "repo-repoindexview--skeleton-fixture",
 			"viewportWidth": 736,
 			"width": 736,
-			"height": 1094,
+			"height": 1177,
 			"bones": [
-				[0, 0, 100, 787, 4, true, 15, true],
+				[0, 0, 100, 870, 4, true, 15, true],
 				[0.1359, 1, 99.7283, 8, "4px 4px 0px 0px"],
 				[2.3098, 25, 26.087, 36, 4],
 				[29.4837, 25, 4.6196, 36, 4, true, 15, false],
@@ -57,7 +57,7 @@
 				[50.9023, 35, 2.1739, 16, 0],
 				[54.1631, 32, 29.0761, 24, 0],
 				[86.0925, 25, 11.5977, 36, 4],
-				[2.3098, 81, 47.1467, 689, 0, true, 2, false],
+				[2.3098, 81, 47.1467, 772, 0, true, 2, false],
 				[2.3098, 85, 10.7825, 21, 4],
 				[2.3098, 114, 9.4811, 21, 4],
 				[2.3098, 143, 7.1799, 21, 4],
@@ -77,37 +77,37 @@
 				[51.6304, 334, 26.7939, 24, 4],
 				[51.6304, 376, 32.5853, 17, 4],
 				[51.6304, 400, 26.7939, 24, 4],
-				[50.5435, 440, 47.1467, 155, 0, true, 1, false],
-				[51.6304, 458, 15.0773, 20, 4],
-				[51.6304, 486, 22.6053, 21, 4],
-				[51.6304, 517, 12.3365, 21, 4],
-				[84.1033, 511, 12.5, 32, 4],
-				[51.6304, 553, 24.1105, 21, 4],
-				[84.1033, 547, 12.5, 32, 4],
-				[50.5435, 595, 47.1467, 175, 0, true, 1, false],
-				[51.6304, 613, 10.8781, 20, 4],
-				[51.6304, 647, 5.7914, 17, 4],
-				[52.5815, 667, 5.87, 15, 4],
-				[51.6304, 698, 5.7914, 17, 4],
-				[51.6304, 731, 5.7914, 17, 4],
-				[0, 803, 100, 291, 4, true, 15, true],
-				[0.1359, 804, 99.7283, 37, 0, true, 4, false],
-				[2.3098, 812, 12.0669, 20, 4],
-				[3.3967, 857, 11.9608, 29, 4],
-				[3.3967, 911, 91.9858, 17, 4],
-				[3.3967, 935, 75.9299, 17, 4],
-				[3.3967, 982, 16.8584, 24, 4],
-				[3.3967, 1032, 92.1068, 17, 4],
-				[3.3967, 1056, 22.3251, 17, 4]
+				[51.6304, 442, 23.6965, 17, 4],
+				[51.6304, 466, 26.7939, 24, 4],
+				[51.6304, 508, 21.7646, 17, 4],
+				[51.6304, 532, 26.7939, 24, 4],
+				[51.6304, 574, 32.5853, 17, 4],
+				[51.6304, 598, 26.7939, 24, 4],
+				[51.6304, 640, 23.6965, 17, 4],
+				[51.6304, 664, 26.7939, 24, 4],
+				[51.6304, 706, 21.7646, 17, 4],
+				[51.6304, 730, 26.7939, 24, 4],
+				[50.5435, 770, 47.1467, 83, 0, true, 1, false],
+				[51.6304, 788, 15.0773, 20, 4],
+				[51.6304, 816, 22.6053, 21, 4],
+				[0, 886, 100, 291, 4, true, 15, true],
+				[0.1359, 887, 99.7283, 37, 0, true, 4, false],
+				[2.3098, 895, 12.0669, 20, 4],
+				[3.3967, 940, 11.9608, 29, 4],
+				[3.3967, 994, 91.9858, 17, 4],
+				[3.3967, 1018, 75.9299, 17, 4],
+				[3.3967, 1065, 16.8584, 24, 4],
+				[3.3967, 1115, 92.1068, 17, 4],
+				[3.3967, 1139, 22.3251, 17, 4]
 			]
 		},
 		"1024": {
 			"name": "repo-repoindexview--skeleton-fixture",
 			"viewportWidth": 992,
 			"width": 992,
-			"height": 1070,
+			"height": 1153,
 			"bones": [
-				[0, 0, 100, 787, 4, true, 15, true],
+				[0, 0, 100, 870, 4, true, 15, true],
 				[0.1008, 1, 99.7984, 8, "4px 4px 0px 0px"],
 				[1.7137, 25, 19.3548, 36, 4],
 				[21.875, 25, 3.4274, 36, 4, true, 15, false],
@@ -116,7 +116,7 @@
 				[63.5726, 35, 1.6129, 16, 0],
 				[65.992, 32, 21.5726, 24, 0],
 				[89.6815, 25, 8.6048, 36, 4],
-				[1.7137, 81, 47.8831, 689, 0, true, 2, false],
+				[1.7137, 81, 47.8831, 772, 0, true, 2, false],
 				[1.7137, 85, 7.9999, 21, 4],
 				[1.7137, 114, 7.0344, 21, 4],
 				[1.7137, 143, 5.327, 21, 4],
@@ -136,29 +136,86 @@
 				[51.2097, 334, 19.8793, 24, 4],
 				[51.2097, 376, 24.1762, 17, 4],
 				[51.2097, 400, 19.8793, 24, 4],
-				[50.4032, 440, 47.8831, 155, 0, true, 1, false],
-				[51.2097, 458, 11.1864, 20, 4],
-				[51.2097, 486, 16.7717, 21, 4],
-				[51.2097, 517, 9.1529, 21, 4],
-				[88.2056, 511, 9.2742, 32, 4],
-				[51.2097, 553, 17.8884, 21, 4],
-				[88.2056, 547, 9.2742, 32, 4],
-				[50.4032, 595, 47.8831, 175, 0, true, 1, false],
-				[51.2097, 613, 8.0708, 20, 4],
-				[51.2097, 647, 4.2969, 17, 4],
-				[51.9153, 667, 4.3552, 15, 4],
-				[51.2097, 698, 4.2969, 17, 4],
-				[51.2097, 731, 4.2969, 17, 4],
-				[0, 803, 100, 267, 4, true, 15, true],
-				[0.1008, 804, 99.7984, 37, 0, true, 4, false],
-				[1.7137, 812, 8.9529, 20, 4],
-				[2.5202, 857, 8.8741, 29, 4],
-				[2.5202, 911, 92.9246, 17, 4],
-				[2.5202, 935, 31.6564, 17, 4],
-				[2.5202, 982, 12.5079, 24, 4],
-				[2.5202, 1032, 85.2791, 17, 4]
+				[51.2097, 442, 17.5813, 17, 4],
+				[51.2097, 466, 19.8793, 24, 4],
+				[51.2097, 508, 16.1479, 17, 4],
+				[51.2097, 532, 19.8793, 24, 4],
+				[51.2097, 574, 24.1762, 17, 4],
+				[51.2097, 598, 19.8793, 24, 4],
+				[51.2097, 640, 17.5813, 17, 4],
+				[51.2097, 664, 19.8793, 24, 4],
+				[51.2097, 706, 16.1479, 17, 4],
+				[51.2097, 730, 19.8793, 24, 4],
+				[50.4032, 770, 47.8831, 83, 0, true, 1, false],
+				[51.2097, 788, 11.1864, 20, 4],
+				[51.2097, 816, 16.7717, 21, 4],
+				[0, 886, 100, 267, 4, true, 15, true],
+				[0.1008, 887, 99.7984, 37, 0, true, 4, false],
+				[1.7137, 895, 8.9529, 20, 4],
+				[2.5202, 940, 8.8741, 29, 4],
+				[2.5202, 994, 92.9246, 17, 4],
+				[2.5202, 1018, 31.6564, 17, 4],
+				[2.5202, 1065, 12.5079, 24, 4],
+				[2.5202, 1115, 85.2791, 17, 4]
+			]
+		},
+		"1440": {
+			"name": "repo-repoindexview--skeleton-fixture",
+			"viewportWidth": 1408,
+			"width": 1408,
+			"height": 1129,
+			"bones": [
+				[0, 0, 100, 870, 4, true, 15, true],
+				[0.071, 1, 99.858, 8, "4px 4px 0px 0px"],
+				[1.2074, 25, 13.6364, 36, 4],
+				[15.4119, 25, 2.4148, 36, 4, true, 15, false],
+				[16.0511, 35, 1.1364, 16, 0],
+				[73.6961, 25, 18.1818, 36, 4, true, 15, false],
+				[74.3353, 35, 1.1364, 16, 0],
+				[76.0398, 32, 15.1989, 24, 0],
+				[92.7302, 25, 6.0625, 36, 4],
+				[1.2074, 81, 48.5085, 772, 0, true, 2, false],
+				[1.2074, 85, 5.6363, 21, 4],
+				[1.2074, 114, 4.9561, 21, 4],
+				[1.2074, 143, 3.7531, 21, 4],
+				[1.2074, 172, 4.0028, 21, 4],
+				[1.2074, 201, 3.6899, 21, 4],
+				[1.2074, 230, 7.4729, 21, 4],
+				[1.2074, 259, 5.8427, 21, 4],
+				[1.2074, 288, 7.5894, 21, 4],
+				[50.8523, 82, 8.1576, 20, 4],
+				[50.8523, 112, 11.377, 17, 4],
+				[50.8523, 136, 14.0059, 24, 4],
+				[50.8523, 178, 17.0332, 17, 4],
+				[50.8523, 202, 14.0059, 24, 4],
+				[50.8523, 244, 12.3868, 17, 4],
+				[50.8523, 268, 14.0059, 24, 4],
+				[50.8523, 310, 11.377, 17, 4],
+				[50.8523, 334, 14.0059, 24, 4],
+				[50.8523, 376, 17.0332, 17, 4],
+				[50.8523, 400, 14.0059, 24, 4],
+				[50.8523, 442, 12.3868, 17, 4],
+				[50.8523, 466, 14.0059, 24, 4],
+				[50.8523, 508, 11.377, 17, 4],
+				[50.8523, 532, 14.0059, 24, 4],
+				[50.8523, 574, 17.0332, 17, 4],
+				[50.8523, 598, 14.0059, 24, 4],
+				[50.8523, 640, 12.3868, 17, 4],
+				[50.8523, 664, 14.0059, 24, 4],
+				[50.8523, 706, 11.377, 17, 4],
+				[50.8523, 730, 14.0059, 24, 4],
+				[50.2841, 770, 48.5085, 83, 0, true, 1, false],
+				[50.8523, 788, 7.8813, 20, 4],
+				[50.8523, 816, 11.8164, 21, 4],
+				[0, 886, 100, 243, 4, true, 15, true],
+				[0.071, 887, 99.858, 37, 0, true, 4, false],
+				[1.2074, 895, 6.3077, 20, 4],
+				[1.7756, 940, 6.2522, 29, 4],
+				[1.7756, 994, 88.0404, 17, 4],
+				[1.7756, 1041, 8.8124, 24, 4],
+				[1.7756, 1091, 60.083, 17, 4]
 			]
 		}
 	},
-	"_hash": "0c5cf28a41256b21d403a325c100746e"
+	"_hash": "40c055a5cfc991014c8c1e133332451e"
 }
diff --git a/web/src/lib/components/repo/RepoChrome.stories.svelte b/web/src/lib/components/repo/RepoChrome.stories.svelte
new file mode 100644
index 000000000..791bff00b
--- /dev/null
+++ b/web/src/lib/components/repo/RepoChrome.stories.svelte
@@ -0,0 +1,62 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import repoRepochromeSkeletonFixture from "$lib/bones/repo-repochrome--skeleton-fixture.bones.json";
+	import RepoChrome from "./RepoChrome.svelte";
+	import type { RepoCounts, RepoInfo, RepoSource } from "./types";
+
+	const repo: RepoInfo = {
+		uri: "at://did:plc:repo/sh.tangled.repo.repo/3jzrepo",
+		rkey: "3jzrepo",
+		name: "tangled",
+		ownerDid: "did:plc:owner",
+		ownerHandle: "dawn",
+		repoDid: "did:plc:repo",
+		knot: "knot1.tangled.sh",
+		description: "community maintained docker config for the knot server",
+		topics: [],
+		defaultBranch: Promise.resolve("main")
+	};
+	const decoratedRepo: RepoInfo = {
+		...repo,
+		website: "https://tangled.org",
+		topics: ["atproto", "git", "svelte"]
+	};
+	const counts: RepoCounts = { stars: 128, issues: 7, pulls: 17, forks: 12 };
+	const source: RepoSource = { ownerHandle: "upstream", name: "tangled" };
+
+	const { Story } = defineMeta({
+		title: "Repo/RepoChrome",
+		component: RepoChrome,
+		tags: ["autodocs"],
+		parameters: { auth: false, layout: "fullscreen" },
+		args: {
+			repo,
+			counts,
+			viewerStarRkey: null,
+			source: null,
+			activeTab: "overview"
+		}
+	});
+</script>
+
+<Story
+	name="Skeleton fixture"
+	play={async ({ canvas }) => {
+		for (const label of ["Overview", "Issues", "Pulls", "Pipelines", "Settings"]) {
+			await expect(canvas.getByRole("link", { name: new RegExp(`^${label}`) })).toBeVisible();
+		}
+	}}
+/>
+
+<Story
+	name="With optional metadata"
+	args={{ repo: decoratedRepo, source }}
+	play={async ({ canvasElement }) => {
+		await expect(canvasElement.getBoundingClientRect().height).toBe(
+			repoRepochromeSkeletonFixture.breakpoints["1024"].height - 1
+		);
+		const metadata = canvasElement.querySelector<HTMLElement>(".overflow-x-auto.h-5");
+		await expect(metadata?.getBoundingClientRect().height).toBe(20);
+	}}
+/>
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 28fc4267f..600ef0120 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -90,42 +90,40 @@
 					{repo.name}
 				</a>
 			</div>
-
-			<Pending>
-				{@const resolvedSource = await (source ?? repo.source)}
-				{#if resolvedSource}
-					<div
-						class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
-					>
-						<GitFork class="size-3 shrink-0" aria-hidden="true" />
-						<span>forked from</span>
-						<a
-							href={resolve(
-								`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
-							)}
-							class="underline"
-						>
-							{resolvedSource.ownerHandle}/{resolvedSource.name}
-						</a>
-					</div>
-				{/if}
-			</Pending>
 		</div>
 
 		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
 	</div>
 
 	<div
-		class="justify flex flex-wrap items-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
+		class="flex h-5 items-center gap-x-4 overflow-x-auto overflow-y-hidden typography-paragraph-small whitespace-nowrap text-foreground-muted"
 	>
 		{#if repo.description}
-			<span>{repo.description}</span>
+			<span class="shrink-0">{repo.description}</span>
 		{:else}
-			<span class="italic">This repository has no description</span>
+			<span class="shrink-0 italic">This repository has no description</span>
 		{/if}
 
+		<Pending>
+			{@const resolvedSource = await (source ?? repo.source)}
+			{#if resolvedSource}
+				<span class="flex shrink-0 items-center gap-1">
+					<GitFork class="size-3 shrink-0" aria-hidden="true" />
+					<span>forked from</span>
+					<a
+						href={resolve(
+							`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
+						)}
+						class="underline"
+					>
+						{resolvedSource.ownerHandle}/{resolvedSource.name}
+					</a>
+				</span>
+			{/if}
+		</Pending>
+
 		{#if repo.website}
-			<span class="flex items-center gap-1">
+			<span class="flex shrink-0 items-center gap-1">
 				<Globe class="size-4 shrink-0" aria-hidden="true" />
 				<a href={repo.website} rel="external ugc nofollow noopener noreferrer"
 					>{trimScheme(repo.website)}</a
@@ -134,7 +132,7 @@
 		{/if}
 
 		{#if topics.length}
-			<div class="flex flex-wrap items-center gap-1">
+			<div class="flex shrink-0 items-center gap-1">
 				{#each topics as topic (topic)}
 					<Tag color="gray">{topic}</Tag>
 				{/each}
diff --git a/web/src/lib/components/repo/RepoIndexPanelSkeleton.svelte b/web/src/lib/components/repo/RepoIndexPanelSkeleton.svelte
new file mode 100644
index 000000000..874a5c6be
--- /dev/null
+++ b/web/src/lib/components/repo/RepoIndexPanelSkeleton.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import repoRepoindexviewPanelSkeletonFixture from "$lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
+</script>
+
+<Bones capture={repoRepoindexviewPanelSkeletonFixture} />
diff --git a/web/src/lib/components/repo/RepoIndexSkeleton.svelte b/web/src/lib/components/repo/RepoIndexSkeleton.svelte
new file mode 100644
index 000000000..5c2d34c3b
--- /dev/null
+++ b/web/src/lib/components/repo/RepoIndexSkeleton.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import RepoIndexPanelSkeleton from "./RepoIndexPanelSkeleton.svelte";
+	import RepoReadmeSkeleton from "./RepoReadmeSkeleton.svelte";
+</script>
+
+<RepoIndexPanelSkeleton />
+<RepoReadmeSkeleton />
diff --git a/web/src/lib/components/repo/RepoIndexView.stories.svelte b/web/src/lib/components/repo/RepoIndexView.stories.svelte
index 608397666..e00b951d0 100644
--- a/web/src/lib/components/repo/RepoIndexView.stories.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.stories.svelte
@@ -1,5 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, waitFor, within } from "storybook/test";
+	import repoReadmeRenderedSanitizedHtml from "$lib/bones/repo-readme--rendered-sanitized-html.bones.json";
+	import repoRepoindexviewPanelSkeletonFixture from "$lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
 	import { pipelinesByCommitHash } from "$fixtures/pipelines";
 	import RepoIndexView from "./RepoIndexView.svelte";
@@ -105,47 +108,49 @@
 		{ name: "LICENSE", kind: "file", size: 1067 },
 		{ name: "README.md", kind: "file", size: 4280 }
 	];
-	const skeletonCommits = Array.from({ length: 5 }, (_, index) => {
+	const skeletonCommits = Array.from({ length: 10 }, (_, index) => {
 		const commit = commits[index % commits.length]!;
 		const prefix = String(index).repeat(8);
 		return { ...commit, hash: `${prefix}${commit.hash}`.slice(0, 40), shortHash: prefix };
 	});
-	const skeletonBranches: IndexContent["branches"] = ["main", "next", "feature/skeletons"].map(
-		(name, index) => ({
-			name,
-			hash: skeletonCommits[index]!.hash,
-			when: skeletonCommits[index]!.when,
-			isDefault: index === 0
-		})
-	);
-	const skeletonTags: IndexContent["tags"] = ["v1.0.0", "v0.9.0", "v0.8.0"].map(
-		(name, index) => ({
-			name,
-			hash: skeletonCommits[index]!.hash,
-			commitHash: skeletonCommits[index]!.hash
-		})
-	);
+	const skeletonBranches: IndexContent["branches"] = [
+		{
+			name: "main",
+			hash: skeletonCommits[0]!.hash,
+			when: skeletonCommits[0]!.when,
+			isDefault: true
+		}
+	];
+	const skeletonTags: IndexContent["tags"] = [];
 	const skeletonReadme = `
 		<h1>Tangled</h1>
 		<p>A social-enabled git collaboration platform built on atproto. Tangled connects repositories, issues, pull requests, and continuous integration without giving one forge control of the network.</p>
 		<h2>Development</h2>
 		<p>The web client, appview, knot, spindle, and bobbin live together so protocol and interface changes can be tested as one system.</p>
 	`;
-	const skeletonData = indexData(
-		{
-			files: skeletonFiles,
-			commits: skeletonCommits,
-			branches: skeletonBranches,
-			totalBranches: skeletonBranches.length,
-			tags: skeletonTags,
-			totalTags: skeletonTags.length
-		},
-		{ readmeHtml: Promise.resolve(skeletonReadme) }
-	);
+	const skeletonContent: Partial<IndexContent> = {
+		files: skeletonFiles,
+		commits: skeletonCommits,
+		branches: skeletonBranches,
+		totalBranches: skeletonBranches.length,
+		tags: skeletonTags,
+		totalTags: skeletonTags.length,
+		refs: { branches: ["main"], tags: [], capped: false }
+	};
+	const skeletonData = indexData(skeletonContent, {
+		readmeHtml: Promise.resolve(skeletonReadme)
+	});
 	const panelSkeletonData = indexData(
-		{ files: skeletonFiles, readme: null },
+		{ ...skeletonContent, readme: null },
 		{ readmeHtml: Promise.resolve(null) }
 	);
+	let releasePanel!: () => void;
+	const stableTransitionData: IndexData = {
+		...indexData({}, { readmeHtml: new Promise(() => {}) }),
+		content: new Promise<IndexContent>((resolve) => {
+			releasePanel = () => resolve({ ...content, ...skeletonContent });
+		})
+	};
 	const emptyData = indexData(
 		{
 			availability: "empty",
@@ -185,6 +190,40 @@
 <Story name="Knot is unreachable" args={{ data: indexData({ availability: "unreachable" }) }} />
 <Story name="Skeleton fixture" args={{ data: skeletonData }} />
 <Story name="Panel skeleton fixture" args={{ data: panelSkeletonData }} />
+<Story
+	name="Stable skeleton transition"
+	args={{ data: stableTransitionData }}
+	play={async ({ canvasElement }) => {
+		await waitFor(() =>
+			expect(canvasElement.querySelectorAll(".bone-pulse").length).toBeGreaterThan(0)
+		);
+		const expectedHeight =
+			repoRepoindexviewPanelSkeletonFixture.breakpoints["1024"].height +
+			16 +
+			repoReadmeRenderedSanitizedHtml.breakpoints["1024"].height;
+		const before = canvasElement.getBoundingClientRect().height;
+		const readmeBefore = canvasElement
+			.querySelector<HTMLElement>('[aria-hidden="true"].mt-4')
+			?.getBoundingClientRect();
+		await expect(before).toBe(expectedHeight);
+		await expect(readmeBefore).toBeDefined();
+
+		releasePanel();
+		const canvas = within(canvasElement);
+		await canvas.findByText("Commits");
+		await waitFor(() =>
+			expect(
+				Math.abs(canvasElement.getBoundingClientRect().height - before)
+			).toBeLessThanOrEqual(1)
+		);
+		const readmeAfter = canvasElement
+			.querySelector<HTMLElement>('[aria-hidden="true"].mt-4')
+			?.getBoundingClientRect();
+		await expect(readmeAfter).toBeDefined();
+		await expect(Math.abs(readmeAfter!.top - readmeBefore!.top)).toBeLessThanOrEqual(1);
+		await expect(Math.abs(readmeAfter!.height - readmeBefore!.height)).toBeLessThanOrEqual(1);
+	}}
+/>
 <Story name="Empty repository" asChild parameters={{ auth: false }}>
 	<RepoIndexView {repo} data={emptyData} bobbinUrl="https://bobbin.example.test" />
 </Story>
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 3a4c90798..3cd7c9480 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -10,11 +10,10 @@
 	import LanguageBar from "./LanguageBar.svelte";
 	import PanelHeader from "./PanelHeader.svelte";
 	import Readme from "./Readme.svelte";
-	import Bones from "$lib/components/ui/Bones.svelte";
-	import repoReadmeRenderedSanitizedHtml from "$lib/bones/repo-readme--rendered-sanitized-html.bones.json";
-	import repoRepoindexviewPanelSkeletonFixture from "$lib/bones/repo-repoindexview--panel-skeleton-fixture.bones.json";
-	import RepoToolbar from "./RepoToolbar.svelte";
+	import RepoIndexPanelSkeleton from "./RepoIndexPanelSkeleton.svelte";
+	import RepoReadmeSkeleton from "./RepoReadmeSkeleton.svelte";
 	import TagList from "./TagList.svelte";
+	import RepoToolbar from "./RepoToolbar.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
@@ -35,7 +34,7 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<Bones capture={repoRepoindexviewPanelSkeletonFixture} />
+		<RepoIndexPanelSkeleton />
 	{/snippet}
 
 	{@const content = await data.content}
@@ -155,7 +154,7 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<Bones capture={repoReadmeRenderedSanitizedHtml} />
+		<RepoReadmeSkeleton />
 	{/snippet}
 
 	{@const readme = (await data.content).readme}
diff --git a/web/src/lib/components/repo/RepoReadmeSkeleton.svelte b/web/src/lib/components/repo/RepoReadmeSkeleton.svelte
new file mode 100644
index 000000000..243423967
--- /dev/null
+++ b/web/src/lib/components/repo/RepoReadmeSkeleton.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import repoReadmeRenderedSanitizedHtml from "$lib/bones/repo-readme--rendered-sanitized-html.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
+</script>
+
+<Bones class="mt-4" capture={repoReadmeRenderedSanitizedHtml} />
diff --git a/web/src/lib/components/ui/Tabs.stories.svelte b/web/src/lib/components/ui/Tabs.stories.svelte
index e1706085c..02b1b9cc4 100644
--- a/web/src/lib/components/ui/Tabs.stories.svelte
+++ b/web/src/lib/components/ui/Tabs.stories.svelte
@@ -44,6 +44,7 @@
 		await expect(await canvas.findByText("28")).toBeVisible();
 		const open = canvas.getByRole("link", { name: "Open" });
 		await waitFor(() => expect(open.querySelector(".bone-pulse")).toBeVisible());
+		await expect(canvas.getByRole("navigation").getBoundingClientRect().height).toBe(31);
 	}}
 />
 <!-- the vertical variant is the settings sidebar shape: it stretches to its container
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index d8c980e8a..15ad8aca4 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -234,7 +234,9 @@
 						{#snippet skeleton()}
 							<Bones
 								capture={uiLoadingprimitivesCount}
-								class="inline-block w-8 {style.count({ selected: isSelected })}"
+								class="inline-block h-5 w-8 overflow-hidden {style.count({
+									selected: isSelected
+								})}"
 							/>
 						{/snippet}
 						{@const count = await tab.count}
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index b5bdb6f37..95f847a2d 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -2,10 +2,12 @@
 	// the @ resets out of the profile shell, repo pages want their own header and
 	// tabs instead of the profile card
 	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
 	import RepoChrome from "$lib/components/repo/RepoChrome.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import repoRepoheaderFullMetadata from "$lib/bones/repo-repoheader--full-metadata.bones.json";
+	import repoRepochromeSkeletonFixture from "$lib/bones/repo-repochrome--skeleton-fixture.bones.json";
 	import Error from "$lib/components/ui/Error.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 
@@ -60,7 +62,7 @@
 		childrenReset = reset;
 	};
 	$effect(() => {
-		page.url.pathname;
+		void page.url.pathname;
 		if (childrenFailed) {
 			childrenFailed = false;
 			childrenReset?.();
@@ -80,7 +82,7 @@
 					? null
 					: resolved.ownerHandle;
 				if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
-					goto(`/${canonical}/${name}${search}`);
+					goto(resolve(`/${canonical}/${name}${search}` as "/"));
 				}
 			})
 			// failures surface through the error boundary instead
@@ -109,12 +111,16 @@
 	{/if}
 </svelte:head>
 
-<section class={fullWidth ? "w-full pt-6" : "mx-auto w-full max-w-screen-lg py-6"}>
+<section class={fullWidth ? "w-full pt-6" : "mx-auto w-full max-w-5xl py-6"}>
 	<!-- remount on navigation, svelte only paints a pending snippet when the boundary is new -->
 	{#key `${page.params.handle}/${page.params.repo}`}
 		<Pending>
 			{#snippet skeleton()}
-				<Bones capture={repoRepoheaderFullMetadata} />
+				{#if bare}
+					<Bones capture={repoRepoheaderFullMetadata} />
+				{:else}
+					<Bones class="-mb-px" capture={repoRepochromeSkeletonFixture} />
+				{/if}
 			{/snippet}
 			<!-- header collapses on error, the boundary below shows the full failure -->
 			{#snippet failed(_error: unknown)}
diff --git a/web/src/routes/[handle]/[repo]/+page.svelte b/web/src/routes/[handle]/[repo]/+page.svelte
index 7db64d9d9..93171b4e9 100644
--- a/web/src/routes/[handle]/[repo]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { commitStatuses } from "$lib/api/commitStatuses";
-	import Bones from "$lib/components/ui/Bones.svelte";
-	import repoRepoindexviewSkeletonFixture from "$lib/bones/repo-repoindexview--skeleton-fixture.bones.json";
+	import RepoIndexSkeleton from "$lib/components/repo/RepoIndexSkeleton.svelte";
 	import RepoIndexView from "$lib/components/repo/RepoIndexView.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 
@@ -21,7 +20,7 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<Bones capture={repoRepoindexviewSkeletonFixture} />
+		<RepoIndexSkeleton />
 	{/snippet}
 	{@const repo = await data.repo}
 	<RepoIndexView {repo} {data} bobbinUrl={data.publicConfig.bobbinUrl} {pipelineStatuses} />
-- 
2.51.2