Hare/yoi
1
1
Fork 0
Code Actions Packages Releases Activity

fix: tighten sidebar footer spacing and inset divider

Browse Source
This commit is contained in:
Hare
2026-10-01 13:30:22 +09:00
parent d3c3f6f4d5
commit f99da27891
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/web-ux/browser-tests/console_history_shell_test.ts
+18 -1
View File
@@ -96,7 +96,16 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
const content = frame.querySelector<HTMLElement>(".sidebar-frame-content")!; const content = frame.querySelector<HTMLElement>(".sidebar-frame-content")!;
const main = document.querySelector<HTMLElement>(".app-shell__main")!; const main = document.querySelector<HTMLElement>(".app-shell__main")!;
const moving = mobile ? frame : content; const moving = mobile ? frame : content;
const footer = frame.querySelector<HTMLElement>(".sidebar-control-row")!;
const pin = frame.querySelector<HTMLElement>(".sidebar-fold-button")!;
const sample = () => ({ const sample = () => ({
footerWidth: footer.getBoundingClientRect().width,
footerHeight: footer.getBoundingClientRect().height,
dividerLeft: parseFloat(getComputedStyle(footer, "::before").left),
dividerRight: parseFloat(getComputedStyle(footer, "::before").right),
footerBorder: getComputedStyle(footer).borderTopWidth,
pinWidth: pin.getBoundingClientRect().width,
pinHeight: pin.getBoundingClientRect().height,
x: moving.getBoundingClientRect().x, x: moving.getBoundingClientRect().x,
width: moving.getBoundingClientRect().width, width: moving.getBoundingClientRect().width,
frameWidth: frame.getBoundingClientRect().width, frameWidth: frame.getBoundingClientRect().width,
@@ -132,7 +141,13 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
const { before, middle, after } = result; const { before, middle, after } = result;
for (const sample of [before, middle, after]) { for (const sample of [before, middle, after]) {
assert(Math.abs(sample.pinLeft - 8) <= 1, "Pin must stay at the sidebar's left edge"); assert(Math.abs(sample.pinLeft - 8) <= 1, "Pin must stay at the sidebar's left edge");
assert(Math.abs(sample.pinBottom - 16) <= 1, "Pin must stay at the sidebar's bottom edge"); assert(Math.abs(sample.pinBottom - 8) <= 1, "Pin must stay at the sidebar's bottom edge");
assertEquals(sample.pinWidth, 32);
assertEquals(sample.pinHeight, 32);
assertEquals(sample.footerHeight, 48, "footer keeps compact, equal padding");
assertEquals(sample.dividerLeft, 8);
assertEquals(sample.dividerRight, 8);
assertEquals(sample.footerBorder, "0px", "divider must not touch the sidebar edges");
} }
assert(opening ? before.x < middle.x && middle.x < after.x : before.x > middle.x && middle.x > after.x, assert(opening ? before.x < middle.x && middle.x < after.x : before.x > middle.x && middle.x > after.x,
`sidebar must slide horizontally through an intermediate position: ${JSON.stringify(result)}`); `sidebar must slide horizontally through an intermediate position: ${JSON.stringify(result)}`);
@@ -143,6 +158,8 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
assertEquals(before.mainHeight, after.mainHeight); assertEquals(before.mainHeight, after.mainHeight);
assertEquals(after.frameWidth, before.frameWidth, "hover mode keeps a fixed rail width"); assertEquals(after.frameWidth, before.frameWidth, "hover mode keeps a fixed rail width");
if (!mobile) { if (!mobile) {
const folded = opening ? before : after;
assertEquals(folded.footerWidth, folded.footerHeight, "folded footer must be square");
assert(opening ? before.panelWidth < middle.panelWidth && middle.panelWidth < after.panelWidth assert(opening ? before.panelWidth < middle.panelWidth && middle.panelWidth < after.panelWidth
: before.panelWidth > middle.panelWidth && middle.panelWidth > after.panelWidth, : before.panelWidth > middle.panelWidth && middle.panelWidth > after.panelWidth,
"the overlay panel must expand past the rail and contract again"); "the overlay panel must expand past the rail and contract again");
web/workspace/src/lib/workspace/sidebar/sidebar.css
+11 -2
View File
@@ -143,12 +143,21 @@
outline-offset: 1px; outline-offset: 1px;
} }
.sidebar-control-row { .sidebar-control-row {
position: relative;
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
justify-content: flex-start; justify-content: flex-start;
gap: var(--space-1); gap: var(--space-1);
border-top: 1px solid var(--line); padding: var(--space-2);
padding: var(--space-4) var(--space-2); }
.sidebar-control-row::before {
content: "";
position: absolute;
top: 0;
inset-inline: var(--space-2);
height: 1px;
background: var(--line);
pointer-events: none;
} }
.workspace-label { .workspace-label {
flex: 1 1 auto; flex: 1 1 auto;