Skip to content

Commit 76a035c

Browse files
pallyoungpallyoung
committed
style: compact secondary surfaces
1 parent 2a40a04 commit 76a035c

7 files changed

Lines changed: 211 additions & 4 deletions

File tree

‎apps/web/src/components/CommandPalette/CommandPalette.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const CommandPalette = ({
3939
<div
4040
className="command-palette"
4141
data-testid="command-palette-shell"
42+
data-density="compact"
4243
role="dialog"
4344
aria-modal="true"
4445
aria-label={locale === "zh" ? "快速操作面板" : "Quick actions palette"}

‎apps/web/src/components/RuntimeValidationOverlay/RuntimeValidationOverlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const RuntimeValidationOverlay = ({
6161
const retryDisabled = validation.status !== "failed";
6262

6363
return (
64-
<div className="overlay" data-testid="runtime-validation-overlay">
64+
<div className="overlay" data-testid="runtime-validation-overlay" data-density="compact">
6565
<div className="modal onboarding-modal">
6666
<div className="onboarding-form runtime-check-shell">
6767
<div className="onboarding-header">

‎apps/web/src/components/Settings/Settings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const Settings = ({
4040
const languageLabel = locale === "zh" ? "中文" : "English";
4141

4242
return (
43-
<main className="settings-route" data-testid="settings-page">
43+
<main className="settings-route" data-testid="settings-page" data-density="compact">
4444
<section className="settings-layout">
4545
<aside className="settings-sidebar-v2">
4646
<nav className="settings-nav-list" aria-label={t("settings")}>

‎apps/web/src/components/WorkspaceLaunchOverlay/WorkspaceLaunchOverlay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const WorkspaceLaunchOverlay = ({
3535

3636
return (
3737
<div className="overlay" data-testid="overlay">
38-
<div className="modal onboarding-modal launch-overlay-shell" data-testid="launch-overlay-shell">
38+
<div className="modal onboarding-modal launch-overlay-shell" data-testid="launch-overlay-shell" data-density="compact">
3939
<div className="onboarding-form">
4040
<div className="onboarding-header launch-overlay-header">
4141
<div className="launch-overlay-copy">

‎apps/web/src/components/WorktreeModal/WorktreeModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const WorktreeModal = ({
2727
t
2828
}: WorktreeModalProps) => (
2929
<div className="modal-overlay">
30-
<div className="modal-card worktree-modal-card" role="dialog" aria-modal="true" data-testid="worktree-modal">
30+
<div className="modal-card worktree-modal-card" role="dialog" aria-modal="true" data-testid="worktree-modal" data-density="compact">
3131
<div className="modal-header worktree-modal-header">
3232
<div className="worktree-modal-copy">
3333
<span className="section-kicker">{locale === "zh" ? "工作树检查" : "Worktree Inspect"}</span>

‎apps/web/src/styles/app.css‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7802,6 +7802,34 @@ pre.diff,
78027802
-webkit-backdrop-filter: none !important;
78037803
}
78047804

7805+
.overlay[data-density="compact"] .onboarding-modal {
7806+
border-radius: 8px !important;
7807+
}
7808+
7809+
.overlay[data-density="compact"] .runtime-check-shell {
7810+
gap: 10px;
7811+
padding: 12px;
7812+
}
7813+
7814+
.overlay[data-density="compact"] .runtime-check-summary {
7815+
gap: 4px;
7816+
padding: 10px 12px;
7817+
border-radius: 6px;
7818+
}
7819+
7820+
.overlay[data-density="compact"] .runtime-check-list {
7821+
gap: 6px;
7822+
}
7823+
7824+
.overlay[data-density="compact"] .settings-inline-status {
7825+
padding: 7px 9px;
7826+
}
7827+
7828+
.overlay[data-density="compact"] .modal-actions {
7829+
margin-top: 0;
7830+
padding-top: 8px;
7831+
}
7832+
78057833
.overlay .onboarding-modal.launch-overlay-shell {
78067834
width: min(760px, calc(100vw - 40px));
78077835
max-height: calc(100vh - 40px);
@@ -7816,6 +7844,16 @@ pre.diff,
78167844
gap: 10px;
78177845
}
78187846

7847+
.launch-overlay-shell[data-density="compact"] {
7848+
width: min(720px, calc(100vw - 40px)) !important;
7849+
border-radius: 8px !important;
7850+
}
7851+
7852+
.launch-overlay-shell[data-density="compact"] .onboarding-form {
7853+
gap: 8px;
7854+
padding: 12px !important;
7855+
}
7856+
78197857
.launch-overlay-header {
78207858
display: grid;
78217859
grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
@@ -7855,6 +7893,20 @@ pre.diff,
78557893
text-overflow: ellipsis;
78567894
}
78577895

7896+
.launch-overlay-shell[data-density="compact"] .launch-overlay-header {
7897+
gap: 8px;
7898+
grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
7899+
}
7900+
7901+
.launch-overlay-shell[data-density="compact"] .launch-overlay-meta {
7902+
gap: 6px;
7903+
}
7904+
7905+
.launch-overlay-shell[data-density="compact"] .launch-overlay-meta-item {
7906+
padding: 8px 9px;
7907+
border-radius: 5px;
7908+
}
7909+
78587910
.choice-grid,
78597911
.choice-grid.small {
78607912
gap: 6px;
@@ -7886,6 +7938,17 @@ pre.diff,
78867938
background: var(--surface-chip) !important;
78877939
}
78887940

7941+
.launch-overlay-shell[data-density="compact"] .choice,
7942+
.launch-overlay-shell[data-density="compact"] .folder-root-chip {
7943+
min-height: 38px;
7944+
padding: 8px 10px;
7945+
}
7946+
7947+
.launch-overlay-shell[data-density="compact"] .folder-browser-row {
7948+
min-height: 42px;
7949+
padding: 8px 10px;
7950+
}
7951+
78897952
.command-palette-overlay {
78907953
padding: clamp(64px, 10vh, 92px) 14px 14px;
78917954
background: rgba(4, 8, 11, 0.72);
@@ -7900,6 +7963,11 @@ pre.diff,
79007963
box-shadow: var(--shadow-md) !important;
79017964
}
79027965

7966+
.command-palette[data-density="compact"] {
7967+
width: min(660px, 100%);
7968+
border-radius: 8px !important;
7969+
}
7970+
79037971
.command-palette-header {
79047972
display: flex;
79057973
align-items: center;
@@ -7931,6 +7999,34 @@ pre.diff,
79317999
border-radius: 4px !important;
79328000
}
79338001

8002+
.command-palette[data-density="compact"] .command-palette-header {
8003+
min-height: 30px;
8004+
padding: 8px 10px 0;
8005+
}
8006+
8007+
.command-palette[data-density="compact"] .command-palette-search-row {
8008+
gap: 6px;
8009+
padding: 8px 10px;
8010+
}
8011+
8012+
.command-palette[data-density="compact"] .command-palette-search-input {
8013+
font-size: 12px;
8014+
}
8015+
8016+
.command-palette[data-density="compact"] .command-palette-results {
8017+
padding: 4px;
8018+
}
8019+
8020+
.command-palette[data-density="compact"] .command-palette-item {
8021+
min-height: 40px;
8022+
padding: 6px 8px;
8023+
border-radius: 5px !important;
8024+
}
8025+
8026+
.command-palette[data-density="compact"] .command-palette-item-description {
8027+
font-size: 11px;
8028+
}
8029+
79348030
.settings-layout {
79358031
grid-template-columns: 200px 1fr;
79368032
}
@@ -8039,6 +8135,65 @@ pre.diff,
80398135
background: var(--surface-strip);
80408136
}
80418137

8138+
.settings-route[data-density="compact"] {
8139+
padding: 8px;
8140+
}
8141+
8142+
.settings-route[data-density="compact"] .settings-layout {
8143+
grid-template-columns: 188px minmax(0, 1fr);
8144+
border: 1px solid var(--border-subtle);
8145+
border-radius: 8px;
8146+
background: var(--surface);
8147+
}
8148+
8149+
.settings-route[data-density="compact"] .settings-sidebar-v2 {
8150+
background: var(--surface-strip);
8151+
}
8152+
8153+
.settings-route[data-density="compact"] .settings-content-v2 {
8154+
background: var(--surface);
8155+
}
8156+
8157+
.settings-route[data-density="compact"] .settings-scroll-panel {
8158+
gap: 8px;
8159+
padding: 10px;
8160+
}
8161+
8162+
.settings-route[data-density="compact"] .settings-summary {
8163+
gap: 6px;
8164+
}
8165+
8166+
.settings-route[data-density="compact"] .settings-summary-item {
8167+
min-height: 58px;
8168+
padding: 8px 10px;
8169+
border-radius: 5px;
8170+
}
8171+
8172+
.settings-route[data-density="compact"] .settings-group-card {
8173+
border-radius: 8px !important;
8174+
}
8175+
8176+
.settings-route[data-density="compact"] .settings-row {
8177+
gap: 10px;
8178+
padding: 9px 10px;
8179+
}
8180+
8181+
.settings-route[data-density="compact"] .settings-row-control {
8182+
min-width: 200px;
8183+
}
8184+
8185+
.settings-route[data-density="compact"] .settings-command-field {
8186+
gap: 6px;
8187+
}
8188+
8189+
.settings-route[data-density="compact"] .settings-inline-status {
8190+
padding: 7px 8px;
8191+
}
8192+
8193+
.settings-route[data-density="compact"] .settings-footer-bar {
8194+
padding: 7px 10px;
8195+
}
8196+
80428197
.worktree-modal-card {
80438198
width: min(960px, calc(100vw - 40px));
80448199
max-height: calc(100vh - 40px);
@@ -8131,6 +8286,53 @@ pre.diff,
81318286
background: var(--surface-chip);
81328287
}
81338288

8289+
.worktree-modal-card[data-density="compact"] {
8290+
width: min(920px, calc(100vw - 36px));
8291+
max-height: calc(100vh - 36px);
8292+
border-radius: 8px !important;
8293+
}
8294+
8295+
.worktree-modal-card[data-density="compact"] .worktree-modal-header {
8296+
align-items: center;
8297+
gap: 8px;
8298+
padding: 10px;
8299+
}
8300+
8301+
.worktree-modal-card[data-density="compact"] .worktree-modal-meta {
8302+
gap: 4px;
8303+
}
8304+
8305+
.worktree-modal-card[data-density="compact"] .worktree-meta-chip {
8306+
min-height: 22px;
8307+
padding: 0 7px;
8308+
border-radius: 5px;
8309+
}
8310+
8311+
.worktree-modal-card[data-density="compact"] .worktree-modal-tabs {
8312+
gap: 4px;
8313+
padding: 6px 10px 0;
8314+
}
8315+
8316+
.worktree-modal-card[data-density="compact"] .worktree-modal-tabs .t-tab {
8317+
min-height: 24px;
8318+
padding: 0 8px;
8319+
border-radius: 5px;
8320+
}
8321+
8322+
.worktree-modal-card[data-density="compact"] .modal-body {
8323+
padding: 10px;
8324+
}
8325+
8326+
.worktree-modal-card[data-density="compact"] .worktree-status-row {
8327+
padding: 8px 10px;
8328+
border-radius: 5px;
8329+
}
8330+
8331+
.worktree-modal-card[data-density="compact"] .diff {
8332+
padding: 10px;
8333+
border-radius: 5px;
8334+
}
8335+
81348336
.modal-body {
81358337
padding: 12px;
81368338
}

‎tests/e2e/e2e.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,7 @@ test('launch overlay shows the server-side folder picker shell', async ({ page }
485485
test('flat matte UI exposes compact shell and supporting screen markers', async ({ page }) => {
486486
await openLaunchOverlay(page);
487487
await expect(page.getByTestId('launch-overlay-shell')).toBeVisible();
488+
await expect(page.getByTestId('launch-overlay-shell')).toHaveAttribute('data-density', 'compact');
488489

489490
const expectedLabel = await launchLocalWorkspace(page);
490491
await expect(page.getByTestId('workspace-topbar')).toContainText(expectedLabel);
@@ -498,6 +499,7 @@ test('flat matte UI exposes compact shell and supporting screen markers', async
498499

499500
await page.getByRole('button', { name: 'Actions' }).click();
500501
await expect(page.getByTestId('command-palette-shell')).toBeVisible();
502+
await expect(page.getByTestId('command-palette-shell')).toHaveAttribute('data-density', 'compact');
501503
await page.keyboard.press('Escape');
502504

503505
await page.getByRole('button', { name: 'Code' }).click();
@@ -511,6 +513,7 @@ test('flat matte UI exposes compact shell and supporting screen markers', async
511513
await expect(page.getByTestId('git-commit-message')).toBeVisible();
512514

513515
await page.getByTestId('settings-open').click();
516+
await expect(page.getByTestId('settings-page')).toHaveAttribute('data-density', 'compact');
514517
await expect(page.getByTestId('settings-summary')).toBeVisible();
515518
});
516519

@@ -522,6 +525,7 @@ test('runtime validation blocks workspace selection until required tools are ins
522525
await page.goto('/');
523526

524527
await expect(page.getByTestId('runtime-validation-overlay')).toBeVisible();
528+
await expect(page.getByTestId('runtime-validation-overlay')).toHaveAttribute('data-density', 'compact');
525529
await expect(page.getByTestId('overlay')).toHaveCount(0);
526530
await expect(page.getByText('Required tools are missing. Install them first before entering workspace selection.')).toBeVisible();
527531
await expect(page.getByRole('button', { name: 'Retry Check' })).toBeEnabled();

0 commit comments

Comments
 (0)