From fe1b048ea460621b6b625cfe842dbff948bf798e Mon Sep 17 00:00:00 2001
From: EwdErna <ewderna@gmail.com>
Date: Thu, 22 Oct 2026 09:13:34 +0900
Subject: [PATCH] =?UTF-8?q?mock:=20=E9=9A=8E=E5=B1=A4=E3=83=91=E3=83=8D?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E9=96=89=E3=81=98=E3=81=9F=E3=82=89=E3=80=81?=
 =?UTF-8?q?=E3=82=AD=E3=83=A3=E3=83=B3=E3=83=90=E3=82=B9=E3=81=8C=E7=A9=BA?=
 =?UTF-8?q?=E3=81=84=E3=81=9F=E5=B9=85=E3=82=92=E5=9F=8B=E3=82=81=E3=82=8B?=
 =?UTF-8?q?(T-30=20=E5=8D=98=E4=BD=8D2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

閉じたときも3列の grid-template-columns のままで、キャンバスが1列目に詰まっていた。
閉じている間は2列(キャンバス・プロパティ欄)に切り替える。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NznQtmVPoQAnietqwr1auL
---
 mock/e2e/phy.spec.ts          | 14 ++++++++++++++
 mock/src/ui/phy/PhyEditor.vue |  5 ++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

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;