diff --git a/mock/e2e/phy.spec.ts b/mock/e2e/phy.spec.ts
index 40148d2..401d05b 100644
--- a/mock/e2e/phy.spec.ts
+++ b/mock/e2e/phy.spec.ts
@@ -15,6 +15,20 @@ async function makeCluster(page: import("@playwright/test").Page) {
   return page.locator('[data-node-type="cluster"]').first();
 }
 
+test("階層パネルを閉じると、キャンバスが空いた幅を埋める", async ({ page }) => {
+  const canvas = page.locator(".canvas-pane");
+  const properties = page.locator(".properties");
+  const before = (await canvas.boundingBox())!;
+  await page.getByRole("button", { name: "階層" }).click();
+  await expect(page.locator(".tree")).toHaveCount(0);
+  await expect.poll(async () => (await canvas.boundingBox())!.width).toBeGreaterThan(before.width + 200);
+  const after = (await canvas.boundingBox())!;
+  const side = (await properties.boundingBox())!;
+  const workspace = (await page.locator(".workspace").boundingBox())!;
+  expect(Math.abs(after.x - workspace.x)).toBeLessThan(1);
+  expect(Math.abs(side.x + side.width - (workspace.x + workspace.width))).toBeLessThan(1);
+});
+
 test("選択レイヤーはキーより前面にあり、回転とフォーカスに追従する", async ({ page }) => {
   test.setTimeout(60_000);
   const keys = page.locator('[data-node-type="key"]');
diff --git a/mock/src/ui/phy/PhyEditor.vue b/mock/src/ui/phy/PhyEditor.vue
index 9e9791a..360a1d9 100644
--- a/mock/src/ui/phy/PhyEditor.vue
+++ b/mock/src/ui/phy/PhyEditor.vue
@@ -302,7 +302,7 @@ function onFocus(_id: string) {
 }
 </script>
 <template>
-  <section class="workspace" :class="{ locked: mismatch }">
+  <section class="workspace" :class="{ locked: mismatch, 'tree-closed': !treeOpen }">
     <aside v-if="treeOpen" class="tree pane">
       <PhyTree :nodes="project.phy.root" :selected="selected" @select="setSel" />
     </aside>
@@ -475,6 +475,9 @@ function onFocus(_id: string) {
   grid-template-columns: 260px minmax(300px, 1fr) 250px;
   gap: 8px;
 }
+.workspace.tree-closed {
+  grid-template-columns: minmax(300px, 1fr) 250px;
+}
 .pane {
   padding: 10px;
   min-height: 0;