网页态用 100vw，Electron subtitle host 里改用 --compact-desktop-workarea-width，避免 BrowserWindow 小视口导致 clamp 上下界反转

Author: MingTianSang

frontend/react-neko-chat/src/styles.css

@@ -2308,26 +2308,22 @@ body.electron-chat-window.subtitle-web-host .compact-chat-surface-shell {
     min(calc(var(--compact-export-surface-width) * 1.18), 63vh)
   );
   --compact-export-history-viewport-gutter: 24px;
+  --compact-export-history-viewport-inline-size: 100vw;
   --compact-export-history-width-ratio: 1.36;
-  --compact-export-history-max-inline-size: calc(100vw - var(--compact-export-history-viewport-gutter));
+  --compact-export-history-max-inline-size: calc(var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-viewport-gutter));
   --compact-export-history-inline-size: min(
     calc(var(--compact-export-surface-width) * var(--compact-export-history-width-ratio)),
     var(--compact-export-history-max-inline-size)
   );
   --compact-export-history-half-inline-size: calc(var(--compact-export-history-inline-size) / 2);
   --compact-export-history-safe-inset: calc(var(--compact-export-history-viewport-gutter) / 2);
   --compact-export-history-center-x: calc(var(--desktop-compact-surface-left, var(--compact-surface-left, 50vw)) + (var(--compact-export-surface-width) / 2));
-  --compact-export-history-surface-gap: 20px;
   left: clamp(
     calc(var(--compact-export-history-half-inline-size) + var(--compact-export-history-safe-inset)),
     var(--compact-export-history-center-x),
-    calc(100vw - var(--compact-export-history-half-inline-size) - var(--compact-export-history-safe-inset))
-  );
-  bottom: calc(
-    100vh
-    - var(--desktop-compact-surface-top, var(--compact-surface-top, 68vh))
-    + var(--compact-export-history-surface-gap, 20px)
+    calc(var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-half-inline-size) - var(--compact-export-history-safe-inset))
   );
+  bottom: calc(100vh - var(--desktop-compact-surface-top, var(--compact-surface-top, 68vh)) + 34px);
   /* Geometry-critical: derive collapse compensation from control metrics; do not animate layout properties here. */
   --compact-export-controls-padding-y: clamp(4px, calc(var(--compact-export-surface-width) * 0.0116), 6px);
   --compact-export-controls-border-width: 1px;
@@ -2364,8 +2360,9 @@ body.electron-chat-window.subtitle-web-host .compact-export-history-anchor {
     --compact-history-slot-height,
     min(calc(var(--compact-export-surface-width) * 1.18), calc(var(--compact-desktop-workarea-height, 900px) * 0.63))
   );
+  --compact-export-history-viewport-inline-size: var(--compact-desktop-workarea-width, 1440px);
   --compact-export-history-max-inline-size: calc(
-    var(--compact-desktop-workarea-width, 1440px) - var(--compact-export-history-viewport-gutter)
+    var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-viewport-gutter)
   );
   max-height: min(calc(var(--compact-export-surface-width) * 1.46), calc(var(--compact-desktop-workarea-height, 900px) * 0.78));
 }

tests/unit/test_react_chat_window_static.py

@@ -240,15 +240,16 @@ def test_compact_history_size_tokens_are_ratio_based_for_ui_optimization():
     assert "--compact-export-history-half-inline-size: calc(var(--compact-export-history-inline-size) / 2);" in anchor_block
     assert "--compact-export-history-safe-inset: calc(var(--compact-export-history-viewport-gutter) / 2);" in anchor_block
     assert "--compact-export-history-center-x: calc(var(--desktop-compact-surface-left, var(--compact-surface-left, 50vw)) + (var(--compact-export-surface-width) / 2));" in anchor_block
-    assert "--compact-export-history-surface-gap: 20px;" in anchor_block
+    assert "--compact-export-history-viewport-inline-size: 100vw;" in anchor_block
     assert "left: clamp(" in anchor_block
     assert "var(--compact-export-history-center-x)" in anchor_block
-    assert "calc(100vw - var(--compact-export-history-half-inline-size) - var(--compact-export-history-safe-inset))" in anchor_block
-    assert "+ var(--compact-export-history-surface-gap, 20px)" in anchor_block
+    assert "calc(var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-half-inline-size) - var(--compact-export-history-safe-inset))" in anchor_block
+    assert "bottom: calc(100vh - var(--desktop-compact-surface-top, var(--compact-surface-top, 68vh)) + 34px);" in anchor_block
     assert "width: var(--compact-export-history-inline-size);" in anchor_block
-    assert "--compact-export-history-max-inline-size: calc(100vw - var(--compact-export-history-viewport-gutter));" in anchor_block
+    assert "--compact-export-history-max-inline-size: calc(var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-viewport-gutter));" in anchor_block
+    assert "--compact-export-history-viewport-inline-size: var(--compact-desktop-workarea-width, 1440px);" in desktop_history_block
     assert "--compact-export-history-max-inline-size: calc(" in desktop_history_block
-    assert "var(--compact-desktop-workarea-width, 1440px) - var(--compact-export-history-viewport-gutter)" in desktop_history_block
+    assert "var(--compact-export-history-viewport-inline-size) - var(--compact-export-history-viewport-gutter)" in desktop_history_block
     assert "max-width: var(--compact-history-bubble-max-ratio, var(--compact-export-history-bubble-max-ratio));" in bubble_block
     assert "max-width: var(--compact-history-bubble-max-ratio, var(--compact-export-history-system-bubble-max-ratio));" in system_bubble_block
     assert "max-width: var(--compact-export-preview-bubble-max-ratio);" in preview_bubble_block