From c2b82a259134225b59c3308e502ec5ccabd669db Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Fri, 21 Aug 2026 18:30:38 +0900
Subject: [PATCH] fix: contain ticket operation rail layout

---
 .../src/lib/workspace/styles/tickets.css      | 15 ++++++++++++++
 .../workspace/tickets/ticket-panel.test.ts    | 20 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/workspace/src/lib/workspace/styles/tickets.css b/web/workspace/src/lib/workspace/styles/tickets.css
index f10b07a4..a55ec02a 100644
--- a/web/workspace/src/lib/workspace/styles/tickets.css
+++ b/web/workspace/src/lib/workspace/styles/tickets.css
@@ -260,6 +260,7 @@
     text-align: center;
   }
   .ticket-detail-page {
+    container: ticket-detail / inline-size;
     gap: var(--space-4);
     max-width: 88rem;
   }
@@ -296,9 +297,14 @@
   }
   .ticket-detail-main, .ticket-control-rail {
     display: grid;
+    min-width: 0;
     gap: var(--space-4);
   }
+  .ticket-detail-main {
+    overflow-wrap: anywhere;
+  }
   .ticket-detail-section, .ticket-control-card, .ticket-editor {
+    min-width: 0;
     border: 1px solid var(--line);
     border-radius: 0.8rem;
     background: var(--bg-raised);
@@ -434,6 +440,15 @@
   .ticket-event-author {
     margin: 0.2rem 0;
   }
+  @container ticket-detail (max-width: 48rem) {
+    .ticket-detail-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .ticket-control-rail {
+      grid-row: 1;
+    }
+  }
+
   @media (max-width: 64rem) {
     .ticket-detail-grid {
       grid-template-columns: 1fr;
diff --git a/web/workspace/src/lib/workspace/tickets/ticket-panel.test.ts b/web/workspace/src/lib/workspace/tickets/ticket-panel.test.ts
index 3b536088..ad5c2de6 100644
--- a/web/workspace/src/lib/workspace/tickets/ticket-panel.test.ts
+++ b/web/workspace/src/lib/workspace/tickets/ticket-panel.test.ts
@@ -11,7 +11,8 @@ import type {
 } from "../../generated/ticket-api.ts";
 
 declare const Deno: {
-  test(name: string, fn: () => void): void;
+  test(name: string, fn: () => void | Promise<void>): void;
+  readTextFile(path: URL): Promise<string>;
 };
 
 function assertEquals<T>(actual: T, expected: T): void {
@@ -108,3 +109,20 @@ Deno.test("ticket worker launch uses the common Worker route and bounded Ticket
     "Work on Ticket 00001KYRRDVH9 as its reviewer.",
   );
 });
+
+Deno.test("ticket detail keeps the operation rail outside main content", async () => {
+  const css = await Deno.readTextFile(
+    new URL("../styles/tickets.css", import.meta.url),
+  );
+
+  assertEquals(css.includes("container: ticket-detail / inline-size;"), true);
+  assertEquals(
+    css.includes(".ticket-detail-main {\n    overflow-wrap: anywhere;"),
+    true,
+  );
+  assertEquals(
+    css.includes("@container ticket-detail (max-width: 48rem)"),
+    true,
+  );
+  assertEquals(css.includes("min-width: 0;"), true);
+});