feat(webui): 横屏导航改为侧边（不再压底部），列表栏固定 320

用户：「导航栏在窄屏横屏情况下不也应当是在侧边吗？」。

横屏缺的是**竖向**空间：底部导航吃掉本就不多的高度（844×390 里它占了 61px），
而横向反而有余（824px）。所以在紧凑双栏下复用桌面那条 60px 图标栏，去掉底部导航。

## 顺带修掉"横屏没自适应"的另一半原因

列表栏宽度写的是 `lg:w-[320px]`，而 lg 断点是 **1024px** —— 844 宽的横屏不满足
⇒ 它退回 `w-full` ⇒ **列表吃掉整宽、详情被挤成一条缝**。之前我只改了排布方式，
没管这件事，所以横屏仍然不好用。现在按"紧凑双栏"这个**语义条件**给宽度
（`.compact-2pane .comm-pane { flex: 0 0 320px }`），而不是再猜一个像素断点。

**实测**（844×390）：侧栏 60×380 在左侧；导航项 = 通信/日历/联系/我；底部导航**不存在**；
列表栏 x=80 宽 **320**；详情 434；无横向溢出。

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}

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;
+}