fix: align TechLog article content widths

2026-08-17 16:49:20 +09:00
parent 72669949bc
commit 79e9aa8328
2 changed files with 62 additions and 22 deletions
@@ -96,6 +96,59 @@ describe("TechLog consumer-visible style contract", () => {
    expect(getComputedStyle(wordmark).fontWeight).toBe("680");
  });

+  it("aligns code, table, and evidence widths with the article body", () => {
+    const view = renderPublicSurface(
+      createElement(
+        "main",
+        { id: "main-content", className: "shell" },
+        createElement(
+          "article",
+          { className: "document-body" },
+          createElement(
+            "section",
+            null,
+            createElement("p", null, "본문"),
+            createElement(
+              "figure",
+              { className: "code-block" },
+              createElement("pre", null, createElement("code", null, "code")),
+            ),
+            createElement(
+              "div",
+              { className: "data-table-wrap" },
+              createElement("table", null, createElement("tbody")),
+            ),
+            createElement(
+              "figure",
+              { className: "evidence-figure" },
+              createElement("img", { alt: "근거 자료" }),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    const article = view.container.querySelector<HTMLElement>(".document-body");
+    const code = view.container.querySelector<HTMLElement>(".code-block");
+    const codeScroller = view.container.querySelector<HTMLElement>(
+      ".code-block pre",
+    );
+    const table = view.container.querySelector<HTMLElement>(".data-table-wrap");
+    const evidence = view.container.querySelector<HTMLElement>(
+      ".evidence-figure",
+    );
+
+    expect(getComputedStyle(article!).width).toBe("min(100%, var(--body-copy))");
+    for (const material of [code, table, evidence]) {
+      expect(getComputedStyle(material!).width).toBe(
+        "min(var(--body-copy), 100%)",
+      );
+      expect(getComputedStyle(material!).transform).toBe("none");
+    }
+    expect(getComputedStyle(codeScroller!).overflowX).toBe("auto");
+    expect(getComputedStyle(table!).overflowX).toBe("auto");
+  });
+
  it("preserves keyboard focus and the real search-field focus style", async () => {
    const user = userEvent.setup();
    const view = renderPublicSurface(