From 7b636803cf0f7054fd4468da4fd16aa67255f078 Mon Sep 17 00:00:00 2001
From: dev <dev@example.invalid>
Date: Thu, 1 Oct 2026 15:55:19 +0800
Subject: [PATCH] web: restore the layout variables, align the sidebar rows,
 and name the layers

---
 content/concepts/chapters.json | 39 ++++++++++++------
 frontend/src/App.svelte        | 20 +++++-----
 frontend/src/app.css           | 72 ++++++++++++++++++++++++----------
 3 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/content/concepts/chapters.json b/content/concepts/chapters.json
index 7de8be7..1574734 100644
--- a/content/concepts/chapters.json
+++ b/content/concepts/chapters.json
@@ -11,7 +11,9 @@
           "title_zh": "导论",
           "summary": "What this documentation covers, how it is organised, and how to read it.",
           "summary_zh": "本套文档的范围、组织方式与阅读方法。",
-          "documents": ["overview"]
+          "documents": [
+            "overview"
+          ]
         },
         {
           "id": "foundation",
@@ -19,14 +21,17 @@
           "title_zh": "基础层",
           "summary": "Units, dimensions, numerical method, and the treatment of error.",
           "summary_zh": "单位与量纲、数值方法以及误差处理。",
-          "documents": ["units-and-dimensions", "numerical-methods"]
+          "documents": [
+            "units-and-dimensions",
+            "numerical-methods"
+          ]
         },
         {
           "id": "physics",
-          "title": "Time and geometry",
-          "title_zh": "时间与几何",
-          "summary": "Time scales, leap seconds, calendars, reference frames, the Earth rotation angle, and the reference ellipsoid.",
-          "summary_zh": "时间尺度、闰秒、日历、参考系、地球自转角与参考椭球。",
+          "title": "Physics",
+          "title_zh": "物理层",
+          "summary": "Time scales, leap seconds, calendars, and the geometry of the Earth: its reference frames, its rotation, and its reference ellipsoid.",
+          "summary_zh": "时间尺度、闰秒与日历，以及地球的几何：参考系、自转与参考椭球。",
           "documents": [
             "time-scales",
             "leap-seconds",
@@ -74,7 +79,11 @@
           "title_zh": "星座与网络",
           "summary": "Constellations, coverage, visibility, access, and the behaviour of a network of satellites.",
           "summary_zh": "星座、覆盖、可见性、接入以及卫星网络的行为。",
-          "documents": ["constellations", "access-and-availability", "handover-and-routing"]
+          "documents": [
+            "constellations",
+            "access-and-availability",
+            "handover-and-routing"
+          ]
         },
         {
           "id": "ops",
@@ -82,7 +91,10 @@
           "title_zh": "运行层",
           "summary": "Command, tracking and telemetry, and the planning of daily operations.",
           "summary_zh": "测控链路以及日常运行的规划。",
-          "documents": ["tt-and-c", "operations-planning"]
+          "documents": [
+            "tt-and-c",
+            "operations-planning"
+          ]
         },
         {
           "id": "sim",
@@ -90,7 +102,9 @@
           "title_zh": "仿真层",
           "summary": "Scenarios, events, and the reasoning behind a simulation result.",
           "summary_zh": "场景、事件以及仿真结果的解读。",
-          "documents": ["scenario-simulation"]
+          "documents": [
+            "scenario-simulation"
+          ]
         }
       ]
     },
@@ -105,9 +119,12 @@
           "title_zh": "ApsisRS 工作区",
           "summary": "How the library is organised, and the provenance of what it implements.",
           "summary_zh": "该库的组织方式，以及其所实现内容的来源。",
-          "documents": ["architecture-apsis-rs", "standards-and-provenance"]
+          "documents": [
+            "architecture-apsis-rs",
+            "standards-and-provenance"
+          ]
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index bd46fa0..886b684 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -191,17 +191,15 @@
             <h2 class="sidebar-group-title">{pick(group.title, lang)}</h2>
             {#each group.sections as section (section.id)}
               <div class="sidebar-chapter" class:collapsed={collapsed.includes(section.id)}>
-                <div class="sidebar-chapter-head">
-                  <a class="sidebar-chapter-title" href="#/docs" title={pick(section.title, lang)}>
-                    {pick(section.title, lang)}
-                  </a>
-                  <button
-                    class="sidebar-chapter-toggle"
-                    aria-expanded={!collapsed.includes(section.id)}
-                    aria-label="{tr('nav.toggleChapter', lang)}: {pick(section.title, lang)}"
-                    onclick={() => toggleChapter(section.id)}
-                  >▾</button>
-                </div>
+                <a class="sidebar-chapter-title" href="#/docs" title={pick(section.title, lang)}>
+                  {pick(section.title, lang)}
+                </a>
+                <button
+                  class="sidebar-chapter-toggle"
+                  aria-expanded={!collapsed.includes(section.id)}
+                  aria-label="{tr('nav.toggleChapter', lang)}: {pick(section.title, lang)}"
+                  onclick={() => toggleChapter(section.id)}
+                >▾</button>
                 {#if !collapsed.includes(section.id)}
                   {#each section.documents as entry (entry.id)}
                     <a
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 3e2ac61..395f256 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -29,6 +29,13 @@
   /* One hue per layer, so that a legend with ten entries is readable. The
      concept graph uses these directly; the flow graphs reuse the earlier
      stage names. */
+  /* Layout. Both are fixed proportions: the sidebar is a share of the
+     window and the table of contents is a share of the reading column, so
+     neither changes size with the length of a title. */
+  --sidebar-width: 19rem;
+  --toc-width: 15rem;
+
+  /* Graph group colours. */
   --group-overview: #7fd1ff;
   --group-foundation: #a3e635;
   --group-physics: #4ade80;
@@ -229,9 +236,17 @@ hr {
    written differently from the layers inside it. */
 .sidebar-group-title {
   color: var(--accent);
+  font-size: 0.72rem;
+  line-height: 1.35;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   padding-bottom: 0.35rem;
-  margin-bottom: 0.6rem;
-  border-bottom: 1px solid var(--border);
+  margin: 0 0 0.55rem 0.4rem;
+  border-bottom: 1px solid var(--border-strong);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sidebar-section h2 {
@@ -244,30 +259,40 @@ hr {
   padding: 0;
 }
 
+/* A layer in the sidebar. It is a two column grid: the title and the fold
+   control, so that every layer occupies the same box whatever the length
+   of its name. A row that grew with its text would give the sidebar an
+   irregular rhythm down its length. */
 .sidebar-chapter {
-  margin-bottom: 0.5rem;
+  /* One box per layer, whatever the length of its name, so the sidebar has a
+     regular rhythm down its length rather than one that follows the text. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 1.1rem;
+  align-items: center;
+  column-gap: 0.15rem;
+  margin-bottom: 0.15rem;
+  padding-left: 0.4rem;
+  border-left: 2px solid var(--border-strong);
+  min-height: 1.35rem;
+  margin-bottom: 0.15rem;
 }
 
-/* The chapter head is a row: the title is a link to the chapter listing
-   and the chevron folds the group. They sit apart so the two do not look
-   like one control. */
-.sidebar-chapter-head {
-  display: flex;
-  align-items: center;
-  gap: 0.1rem;
-  margin-bottom: 0.15rem;
-  padding-left: 0.35rem;
-  border-left: 2px solid var(--border-strong);
+/* The document links belong to the layer but are not part of its header
+   row, so they take the whole width below it. Without this they are
+   placed in the header's first column and a link with no space to break is
+   set one character per line. */
+.sidebar-chapter > a.item {
+  grid-column: 1 / -1;
 }
 
 .sidebar-chapter-title {
-  flex: 1 1 auto;
+  min-width: 0;
   font-size: 0.78rem;
+  line-height: 1.35;
   color: var(--text);
   margin: 0;
   font-weight: 700;
   letter-spacing: 0.02em;
-  text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -279,7 +304,6 @@ hr {
 }
 
 .sidebar-chapter-toggle {
-  flex: 0 0 auto;
   width: 1.1rem;
   height: 1.1rem;
   padding: 0;
@@ -1373,15 +1397,21 @@ tbody tr:hover {
   }
 
   .doc-layout {
-    flex-direction: column;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .doc-layout.no-toc {
+    max-width: none;
   }
 
   .doc-toc {
-    position: relative;
-    top: 0;
-    width: 100%;
-    flex: none;
+    position: static;
     max-height: none;
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--border);
+    padding-left: 0;
+    padding-top: 0.75rem;
   }
 
   .content {