vrr/kimi-code
2
0
Fork 0
mirror of https://github.com/MoonshotAI/kimi-code.git synced 2026-08-29 20:12:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(web): align session/workspace text via shared sidebar indent contract

Browse source 
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.
This commit is contained in:
qer 2026-06-10 03:38:19 +08:00 • committed by haozhe.yang
parent bf0b827119
commit f1ecfc59cf
3 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
apps/kimi-web/src/components/SessionRow.vue
View file

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

15
apps/kimi-web/src/components/Sidebar.vue
View file

@ -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 {

3
apps/kimi-web/src/style.css
View file

@ -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 {