diff --git a/client/electron/src/App.tsx b/client/electron/src/App.tsx
index 23df23f..1dbe729 100644
--- a/client/electron/src/App.tsx
+++ b/client/electron/src/App.tsx
@@ -225,7 +225,7 @@ export default function App() {
     // 它们已经是紧凑外壳的一部分，换的只是内容区的排布方式。
     if (compactTwoPane && hasList) {
       return (
-        <NarrowShell>
+        <NarrowShell sideNav>
           <div className="flex-1 min-h-0 flex">{list}{main}</div>
         </NarrowShell>
       );
@@ -266,7 +266,28 @@ function PaneLoading() {
  * fixed 层级 + 遮罩的代价是：抽屉 `z-50` 铺满视口高度，把底部导航
  * 最左那一项盖住点不到（实测 elementFromPoint 命中抽屉里的 SVG）。
  */
-function NarrowShell({ children }: { children: React.ReactNode }) {
+function NarrowShell({
+  children,
+  sideNav = false
+}: {
+  children: React.ReactNode;
+  /**
+   * 导航放侧边而不是底边（紧凑横屏用）。
+   *
+   * 用户（2026-09-14）：「导航栏在窄屏横屏情况下不也应当是在侧边吗？」——
+   * 横屏缺的是**竖向**空间：底部导航会吃掉本就不多的高度，而横向反而有余。
+   * 复用桌面那条 60px 图标栏，而不是为横屏再写一套导航。
+   */
+  sideNav?: boolean;
+}) {
+  if (sideNav) {
+    return (
+      <div className="narrow-shell compact-2pane h-full flex bg-gray-50 overflow-hidden safe-frame">
+        <Sidebar />
+        {children}
+      </div>
+    );
+  }
   return (
     <div className="narrow-shell h-full flex flex-col bg-gray-50 overflow-hidden safe-frame">
       {children}
diff --git a/client/electron/src/index.css b/client/electron/src/index.css
index d823d2c..e7abcc4 100644
--- a/client/electron/src/index.css
+++ b/client/electron/src/index.css
@@ -1131,3 +1131,23 @@ html.view-switch .glass-control,
     animation: none;
   }
 }
+
+
+/*
+ * 紧凑双栏（手机横屏）下，列表栏固定 320px。
+ *
+ * 为什么不能靠 Tailwind：列表栏的宽度写的是 `lg:w-[320px]`，而 lg 断点是 1024px ——
+ * 844 宽的横屏**不满足** ⇒ 它退回 `w-full` ⇒ 列表吃掉整宽、详情被挤成一条缝
+ * （这正是用户最早说"横屏没自适应"背后的一半原因）。
+ * 这里按"紧凑双栏"这个语义条件给宽度，而不是再猜一个像素断点。
+ */
+.compact-2pane .comm-pane {
+  flex: 0 0 320px;
+  max-width: 320px;
+}
+
+/* 详情栏占满剩下的宽度 */
+.compact-2pane > .flex-1 > :last-child {
+  flex: 1 1 0%;
+  min-width: 0;
+}