From f1ecfc59cfd363b298cfbcd534c7dbe365436bec Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Wed, 10 Jun 2026 03:38:19 +0800
Subject: [PATCH] fix(web): align session/workspace text via shared sidebar
 indent contract

Workspace names, path lines and session titles each derived their left
edge from unrelated magic numbers (terminal: session 5px left of the
workspace name; modern: 1px right because the .se inset margin was not
compensated; path line 2px off). Define one --sb-pad-x/--sb-gutter/
--sb-gap contract on .side and derive all three from it; drop the dead
:root block in SessionRow's scoped style. Verified in-browser: all
three text edges at x=34 in both themes.
---
 apps/kimi-web/src/components/SessionRow.vue | 18 ++++++------------
 apps/kimi-web/src/components/Sidebar.vue    | 15 +++++++++++----
 apps/kimi-web/src/style.css                 |  3 +++
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/kimi-web/src/components/SessionRow.vue b/apps/kimi-web/src/components/SessionRow.vue
index d2728ad3f..53bcfcbbf 100644
--- a/apps/kimi-web/src/components/SessionRow.vue
+++ b/apps/kimi-web/src/components/SessionRow.vue
@@ -172,16 +172,11 @@ defineExpose({ closeMenu, cancelDelete });
 </template>
 
 <style scoped>
-:root {
-  /* Sidebar alignment — session rows sit 5px left of the workspace name
-     (workspace: folder icon 14px + mr 2px + gap 6px = 22px;
-      session: spacer 9px + mr 2px + gap 6px = 17px → 5px left). */
-  --session-indent: calc(9px + 2px + 6px);
-}
-
 .se {
+  /* --sb-* vars come from .side in Sidebar.vue: the title starts at
+     --sb-pad-x + --sb-gutter + --sb-gap, exactly under the workspace name. */
   display: block;
-  padding: 7px 12px;
+  padding: 7px var(--sb-pad-x, 12px);
   cursor: pointer;
   position: relative;
 }
@@ -191,16 +186,15 @@ defineExpose({ closeMenu, cancelDelete });
 .row {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sb-gap, 6px);
   min-width: 0;
 }
 
-/* Spacer sits 5px left of the workspace name (9px vs 14px folder icon). */
+/* Leading spacer mirrors the workspace header's icon slot. */
 .row::before {
   content: '';
   display: block;
-  width: 9px;
-  margin-right: 2px;
+  width: var(--sb-gutter, 16px);
   flex: none;
 }
 
diff --git a/apps/kimi-web/src/components/Sidebar.vue b/apps/kimi-web/src/components/Sidebar.vue
index 9e40d8bc6..ead7f25a9 100644
--- a/apps/kimi-web/src/components/Sidebar.vue
+++ b/apps/kimi-web/src/components/Sidebar.vue
@@ -583,6 +583,12 @@ function blinkOnce(): void {
   flex-direction: row;
   min-width: 0;
   height: 100%;
+  /* Alignment contract, inherited by SessionRow and the theme overrides in
+     style.css: text in the workspace header, the path line and session rows
+     all starts at --sb-pad-x + --sb-gutter + --sb-gap from the sidebar edge. */
+  --sb-pad-x: 12px;  /* row horizontal padding */
+  --sb-gutter: 16px; /* leading icon slot (14px folder icon + 2px margin) */
+  --sb-gap: 6px;     /* gap between the icon slot and the text */
 }
 
 /* Session column. Width is set inline from the App resize handle. */
@@ -692,14 +698,14 @@ function blinkOnce(): void {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding: 0px 12px 4px 12px;
+  padding: 0 var(--sb-pad-x) 4px;
   font-size: 10.5px;
   user-select: none;
 }
 .gh-top {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sb-gap);
 }
 .gh.sel {
   background: var(--soft);
@@ -709,7 +715,8 @@ function blinkOnce(): void {
 .gh-folder {
   flex: none;
   color: var(--muted);
-  margin-right: 2px;
+  /* 14px icon + 2px margin fills the --sb-gutter icon slot */
+  margin-right: calc(var(--sb-gutter) - 14px);
 }
 
 .gh-name {
@@ -728,7 +735,7 @@ function blinkOnce(): void {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 24px;
+  padding-left: calc(var(--sb-gutter) + var(--sb-gap));
   font-size: 12px;
 }
 .gh-add {
diff --git a/apps/kimi-web/src/style.css b/apps/kimi-web/src/style.css
index 3fd11c83d..d7f5794f7 100644
--- a/apps/kimi-web/src/style.css
+++ b/apps/kimi-web/src/style.css
@@ -201,6 +201,9 @@ html[data-theme="modern"] .chat { background: transparent; }
 html[data-theme="modern"] .se {
   margin: 1px 6px;
   border-radius: var(--r-sm);
+  /* Trim the row padding by the inset margin so the title still starts at the
+     same x as the workspace name (whose header has no inset). */
+  padding: 7px calc(var(--sb-pad-x, 12px) - 6px);
 }
 html[data-theme="modern"] .se:hover { background: #f0f0f0; }
 html[data-theme="modern"] .se.on {