Repository navigation
修一个真实布局缺陷：右侧栏一打开，面板就叠字。
原因
侧栏展开后对话列只剩约 650 CSS px。原来的主行是 7 列 grid：
minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)
容器变窄时 minmax(0,1fr) 的松紧列先塌成 0，而 auto 列守住自己的内容宽（占用区还写着固定 width: 30em），总最小宽超出容器后 grid 项直接压过相邻块。
改法
- 主行改为可换行的 flex（
space-evenly，等价于原来的 4 条1fr松紧列，观感不变），弹性收缩、越界即换行，结构上不可能再重叠 - 用
ResizeObserver实测自身宽度切换三档排布（面板在对话列里，视口断点看不见侧栏造成的变窄）：>= 720px单行：总览 / 占用区 / 图例 并排>= 440px两行：总览与图例配对，占用区独占一行、图随宽度变宽- 更窄：三者依次堆叠
验证
离线等价复现页在真实 Chromium 跑 300–1400px 共 18 档宽度，对三块做矩形相交与容器溢出断言：零相交、零溢出，切换点准确落在 720 / 440。