mkdocs-pixel-lab 0.2.1__tar.gz → 0.2.2__tar.gz

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: mkdocs-pixel-lab
-Version: 0.2.1
+Version: 0.2.2
 Summary: A vibrant, accessible MkDocs documentation theme by Trained-by-Humans.
 Project-URL: Homepage, https://github.com/trained-by-humans/mkdocs-pixel-lab
 Project-URL: Documentation, https://github.com/trained-by-humans/mkdocs-pixel-lab#readme

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/docs/components/details.md

@@ -62,6 +62,76 @@ This body supports **Markdown**.
 </details>
 ```
 
+## Layout modes
+
+Pixel Lab chooses each expanded body's layout automatically, like
+[content tabs](tabs.md#layout-modes):
+
+- A single [code block](code-blocks.md) or [table](tables.md) fills the body **flush**.
+- Prose, multiple blocks, and mixed content use a **padded** inset.
+- Nested details and tabs select their layouts independently.
+
+Flush content shares the details frame without a duplicate border or surrounding
+gap. Code retains its internal padding, and wide code and tables scroll
+horizontally inside the body.
+
+???+ note "Code without an extra inset"
+
+    ```python
+    print("One code block fills the expanded body")
+    ```
+
+???+ note "A table without an extra inset"
+
+    | Content | Layout |
+    | --- | --- |
+    | Single code block or table | Flush |
+    | Prose or mixed content | Padded |
+
+### Scoped layout overrides
+
+Use `.details-padded` or `.details-flush` directly on a native `<details>`
+element, or wrap selected `???` blocks using
+[Scope selected instances](index.md#scope-selected-instances):
+
+<div class="details-padded" markdown="1">
+
+???+ note "Always padded"
+
+    ```python
+    print("Keep an inset around this block")
+    ```
+
+</div>
+
+````markdown
+<div class="details-padded" markdown="1">
+
+???+ note "Always padded"
+
+    ```python
+    print("Keep an inset around this block")
+    ```
+
+</div>
+````
+
+For native HTML, place the class on the element:
+
+```html
+<details class="details-flush" open>
+<summary>Always flush</summary>
+<pre><code>Keep code's internal padding.</code></pre>
+</details>
+```
+
+> [!NOTE]
+>
+> - For nested details, the nearest details layout class controls the layout.
+> - These classes affect only details; `.tabs-padded` and `.tabs-flush` affect only tabs.
+> - `.details-padded` and `.details-flush` work with or without JavaScript.
+> - Automatic layout requires JavaScript, without it details stay padded.
+
 ## Customization
 
 These theme settings customize all collapsible blocks. Different detail types

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "mkdocs-pixel-lab"
-version = "0.2.1"
+version = "0.2.2"
 description = "A vibrant, accessible MkDocs documentation theme by Trained-by-Humans."
 readme = "README.md"
 requires-python = ">=3.10"

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/src/mkdocs_pixel_lab/assets/css/style.css

@@ -563,12 +563,47 @@ img, video {
   padding: 8px 12px;
   text-transform: uppercase;
 }
-.admonition > :not(.admonition-title), details > :not(summary) {
+.admonition > :not(.admonition-title) {
   margin-left: 14px;
   margin-right: 14px;
   max-width: calc(100% - 28px);
 }
 .admonition-title + p { padding-bottom: 14px; }
+/* Details are padded by default. Explicit classes inherit through wrappers;
+   JavaScript marks automatic layouts on the details element itself. */
+.details-padded,
+:where(details[data-details-layout="padded"]) {
+  --details-padding: 14px;
+  --details-inner-border: 2px;
+  --details-table-width: fit-content;
+  --details-cell-border: 1px;
+}
+.details-flush,
+:where(details[data-details-layout="flush"]) {
+  --details-padding: 0px;
+  --details-inner-border: 0px;
+  --details-table-width: 100%;
+  --details-cell-border: 0px;
+}
+details { padding: 0 var(--details-padding, 14px) var(--details-padding, 14px); }
+details > summary { margin: 0 calc(-1 * var(--details-padding, 14px)) var(--details-padding, 14px); }
+details:not([open]) { padding-bottom: 0; }
+details:not([open]) > summary { margin-bottom: 0; }
+details > :not(summary) { margin-left: 0; margin-right: 0; max-width: 100%; }
+details > pre,
+details > .highlight > pre { border-width: var(--details-inner-border, 2px); max-width: 100%; }
+details[open] > summary + *,
+details > summary + .highlight > pre { margin-top: 0; }
+details > :last-child:not(summary),
+details > .highlight:last-child > pre { margin-bottom: 0; }
+details > table { display: block; overflow-x: auto; }
+details > .table-shell { max-width: 100%; width: var(--details-table-width, fit-content); }
+details > .table-shell > .table-scroll { border-width: var(--details-inner-border, 2px); }
+details > .table-shell > .table-scroll > table { min-width: 100%; }
+:is(details > table, details > .table-shell > .table-scroll > table) > :first-child > tr:first-child > * { border-top-width: var(--details-cell-border, 1px); }
+:is(details > table, details > .table-shell > .table-scroll > table) > :last-child > tr:last-child > * { border-bottom-width: var(--details-cell-border, 1px); }
+:is(details > table, details > .table-shell > .table-scroll > table) > * > tr > :first-child { border-left-width: var(--details-cell-border, 1px); }
+:is(details > table, details > .table-shell > .table-scroll > table) > * > tr > :last-child { border-right-width: var(--details-cell-border, 1px); }
 
 .tabbed-set {
   background: var(--surface);

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/src/mkdocs_pixel_lab/assets/js/main.js

@@ -347,19 +347,31 @@ document.addEventListener("DOMContentLoaded", () => {
     scroll.appendChild(table);
   });
 
-  // Classify direct panel content after tables receive their scrolling wrappers.
-  document.querySelectorAll(".tabbed-content > .tabbed-block").forEach((panel) => {
-    const override = panel.closest(".tabs-padded, .tabs-flush");
-    const content = panel.firstElementChild;
+  // Classify direct content after tables receive their scrolling wrappers.
+  const contentLayout = (panel, override = null, flushClass = "tabs-flush") => {
+    const children = Array.from(panel.children).filter((child) => !child.matches("summary"));
+    const content = children[0];
     const hasText = Array.from(panel.childNodes).some(
       (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim(),
     );
-    const singleBlock = panel.children.length === 1 && !hasText && content && (
+    const singleBlock = children.length === 1 && !hasText && content && (
       content.matches("pre, .table-shell") ||
       (content.matches(".highlight") && content.querySelector("pre"))
     );
-    const flush = override ? override.classList.contains("tabs-flush") : singleBlock;
-    panel.dataset.tabLayout = flush ? "flush" : "padded";
+    const flush = override ? override.classList.contains(flushClass) : singleBlock;
+    return flush ? "flush" : "padded";
+  };
+
+  document.querySelectorAll(".tabbed-content > .tabbed-block").forEach((panel) => {
+    panel.dataset.tabLayout = contentLayout(
+      panel, panel.closest(".tabs-padded, .tabs-flush"), "tabs-flush",
+    );
+  });
+
+  document.querySelectorAll(".main details").forEach((details) => {
+    // Explicit classes are handled by CSS, with or without JavaScript.
+    if (details.closest(".details-padded, .details-flush")) return;
+    details.dataset.detailsLayout = contentLayout(details);
   });
 
   document.querySelectorAll(".tabs-demo").forEach((group) => {

mkdocs_pixel_lab-0.2.2/tests/fixture_site/docs/guide/details.md

@@ -0,0 +1,231 @@
+# Details layouts
+
+## Pymdown details
+
+<!-- Minimal reproduction of the code-only expand at:
+https://ultralytics.ml-pipes.com/tutorials/isolate_segmented_objects/ -->
+<div id="pym-code" markdown="1">
+
+??? note "Define the IsolateObjects operator"
+
+    ```python
+    def isolate_objects(image, masks):
+        return [image * mask for mask in masks]  # A long line exercises scrolling without widening the expandable frame.
+    ```
+
+</div>
+
+<div id="pym-table" markdown="1">
+
+???+ tip "Table, initially open"
+
+    | Payload | Result |
+    | --- | --- |
+    | `a_very_long_unbroken_payload_name_to_exercise_horizontal_scrolling_in_a_narrow_details_body` | Isolated object |
+
+</div>
+
+<div id="pym-prose" markdown="1">
+
+???+ note "Prose"
+
+    Keep a comfortable inset for explanations.
+
+</div>
+
+<div id="pym-mixed" markdown="1">
+
+???+ note "Mixed content"
+
+    Explanation before code.
+
+    ```python
+    print("Mixed content stays padded")
+    ```
+
+</div>
+
+<div id="pym-multiple" markdown="1">
+
+???+ note "Multiple blocks"
+
+    ```text
+    First block
+    ```
+
+    ```text
+    Second block
+    ```
+
+</div>
+
+## Native HTML
+
+<details id="raw-code" open>
+<summary>Raw code</summary>
+<!-- Comments and whitespace do not count as content blocks. -->
+<pre><code>A long raw code line exercises horizontal scrolling without widening the expandable frame or losing its internal code padding.</code></pre>
+</details>
+
+<details id="raw-table">
+<summary>Raw table</summary>
+<table><thead><tr><th>Payload</th><th>Result</th></tr></thead>
+<tbody><tr><td>a_very_long_unbroken_payload_name_to_exercise_horizontal_scrolling_in_a_narrow_details_body</td><td>Isolated object</td></tr></tbody></table>
+</details>
+
+<details id="raw-prose" open>
+<summary>Raw prose</summary>
+<p>Keep a comfortable inset for explanations.</p>
+</details>
+
+<details id="raw-mixed" open>
+<summary>Raw mixed content</summary>
+<p>Explanation before code.</p>
+<pre><code>Mixed content stays padded.</code></pre>
+</details>
+
+<details id="raw-multiple" open>
+<summary>Raw multiple blocks</summary>
+<pre><code>First block</code></pre>
+<pre><code>Second block</code></pre>
+</details>
+
+<details id="raw-text" open>
+<summary>Text nodes also count</summary>
+An unwrapped explanation.
+<pre><code>One element with a text sibling stays padded.</code></pre>
+</details>
+
+## Explicit overrides
+
+<div id="pym-padded-code" class="details-padded" markdown="1">
+
+???+ note "Padded code"
+
+    ```python
+    print("Explicit inset")
+    ```
+
+</div>
+
+<div id="pym-padded-table" class="details-padded" markdown="1">
+
+???+ note "Padded table"
+
+    | Setting | Value |
+    | --- | --- |
+    | Inset | Padded |
+
+</div>
+
+<div id="pym-flush-mixed" class="details-flush" markdown="1">
+
+???+ note "Flush mixed content"
+
+    Explicitly remove the surrounding inset.
+
+    ```python
+    print("Still keep internal code padding")
+    ```
+
+</div>
+
+<details id="raw-padded-code" class="details-padded" open>
+<summary>Raw padded code</summary>
+<pre><code>Explicit inset</code></pre>
+</details>
+
+<details id="raw-padded-table" class="details-padded" open>
+<summary>Raw padded table</summary>
+<table><tr><th>Setting</th><th>Value</th></tr><tr><td>Inset</td><td>Padded</td></tr></table>
+</details>
+
+<details id="raw-flush-mixed" class="details-flush" open>
+<summary>Raw flush mixed content</summary>
+<p>Explicitly remove the surrounding inset.</p>
+<pre><code>Still keep internal code padding</code></pre>
+</details>
+
+<div id="pym-flush-code" class="details-flush" markdown="1">
+
+???+ note "Flush code without JavaScript"
+
+    ```python
+    print("A long code line scrolls horizontally while the explicit flush layout keeps its internal code padding intact.")
+    ```
+
+</div>
+
+<div id="pym-flush-table" class="details-flush" markdown="1">
+
+???+ note "Flush table without JavaScript"
+
+    | Payload | Result |
+    | --- | --- |
+    | `a_very_long_unbroken_payload_name_to_exercise_horizontal_scrolling_in_a_narrow_details_body` | Isolated object |
+
+</div>
+
+<details id="raw-flush-code" class="details-flush" open>
+<summary>Raw flush code without JavaScript</summary>
+<pre><code>A long code line scrolls horizontally while the explicit flush layout keeps its internal code padding intact.</code></pre>
+</details>
+
+<details id="raw-flush-table" class="details-flush" open>
+<summary>Raw flush table without JavaScript</summary>
+<table><thead><tr><th>Payload</th><th>Result</th></tr></thead>
+<tbody><tr><td>a_very_long_unbroken_payload_name_to_exercise_horizontal_scrolling_in_a_narrow_details_body</td><td>Isolated object</td></tr></tbody></table>
+</details>
+
+## Nested details and tabs
+
+<div class="details-padded" markdown="1">
+
+<details id="nested-outer" class="details-flush" open markdown="1">
+<summary>Closest override wins</summary>
+
+<details id="nested-inner" class="details-padded" open markdown="1">
+<summary>Inner details override</summary>
+
+```python
+print("Inner details are padded")
+```
+
+</details>
+
+<details id="nested-inherited" open>
+<summary>Inherit the closest wrapper</summary>
+<pre><code>Inherit flush from the outer details</code></pre>
+</details>
+
+=== "Independent tabs"
+
+    ```python
+    print("Tabs automatically select flush despite details overrides")
+    ```
+
+</details>
+
+</div>
+
+<details id="automatic-outer" open>
+<summary>Automatic nested details</summary>
+<details id="automatic-inner" open>
+<summary>Inner code</summary>
+<pre><code>Only the inner details automatically become flush.</code></pre>
+</details>
+</details>
+
+<div id="details-in-tabs" class="tabs-flush" markdown="1">
+
+=== "Independent details"
+
+    ???+ note "Details still choose padded"
+
+        A tab override does not change the details layout.
+
+        ```text
+        Mixed content stays padded.
+        ```
+
+</div>

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/tests/fixture_site/mkdocs.yml

@@ -14,6 +14,7 @@ nav:
       - Overview: guide/nested.md
       - Media gallery: guide/media.md
       - Tab layouts: guide/tabs.md
+      - Details layouts: guide/details.md
       - Code highlighting: guide/code.md
       - Component alignment: guide/alignment.md
 plugins:

{mkdocs_pixel_lab-0.2.1 → mkdocs_pixel_lab-0.2.2}/tests/test_theme.py

@@ -651,6 +651,207 @@ def test_tabs_keep_padded_fallback_without_javascript(browser, site_url: str) ->
         context.close()
 
 
+@pytest.mark.parametrize("width", [1440, 390, 320])
+def test_details_content_layouts(page, site_url: str, width: int) -> None:
+    page.set_viewport_size({"width": width, "height": 900})
+    page.goto(f"{site_url}/guide/details/")
+    page.evaluate("document.fonts.ready")
+    page.add_style_tag(content="html { scroll-behavior: auto; }")
+    expect(page.locator("#pym-code > details")).not_to_have_attribute("open")
+    expect(page.locator("#pym-table > details")).to_have_attribute("open", "open")
+    expect(page.locator("#raw-code")).to_have_attribute("open", "")
+    expect(page.locator("#raw-table")).not_to_have_attribute("open")
+    expect(page.locator(".details-content")).to_have_count(0)
+    for source in ("pym", "raw"):
+        for kind, layout in (("code", "flush"), ("table", "flush"), ("prose", "padded"),
+                             ("mixed", "padded"), ("multiple", "padded"),
+                             ("padded-code", "padded"), ("padded-table", "padded"),
+                             ("flush-mixed", "flush"), ("flush-code", "flush"), ("flush-table", "flush")):
+            fixture = page.locator(f"#{source}-{kind}")
+            details = fixture if source == "raw" else fixture.locator(":scope > details")
+            summary = details.locator(":scope > summary")
+            if details.get_attribute("open") is None:
+                summary.click()
+            content = details.locator(":scope > :not(summary)")
+            expect(content.first).to_be_visible()
+            if "-" not in kind:
+                expect(details).to_have_attribute("data-details-layout", layout)
+            else:
+                expect(details).not_to_have_attribute("data-details-layout")
+            inset = 0 if layout == "flush" else 14
+            expect(details).to_have_css("padding-left", f"{inset}px")
+            expect(details).to_have_css("padding-bottom", f"{inset}px")
+            outer = details.bounding_box()
+            summary_bounds = summary.bounding_box()
+            first = content.first.bounding_box()
+            last = content.last.bounding_box()
+            assert summary_bounds["x"] == pytest.approx(outer["x"] + 2)
+            assert summary_bounds["width"] == pytest.approx(outer["width"] - 4)
+            assert first["x"] == pytest.approx(outer["x"] + 2 + inset)
+            assert first["y"] == pytest.approx(summary_bounds["y"] + summary_bounds["height"] + inset)
+            assert last["y"] + last["height"] == pytest.approx(outer["y"] + outer["height"] - 2 - inset)
+            for pre in details.locator("pre").all():
+                expect(pre).to_have_css("padding-left", "20px")
+                expect(pre).to_have_css("box-shadow", "none")
+                if layout == "flush":
+                    expect(pre).to_have_css("border-left-width", "0px")
+                    assert pre.bounding_box()["width"] == pytest.approx(outer["width"] - 4)
+            if kind in ("code", "table"):
+                scroll = details.locator("pre" if kind == "code" else ".table-scroll")
+                expect(scroll).to_have_css("border-top-width", "0px")
+                expect(scroll).to_have_css("border-bottom-width", "0px")
+                expect(scroll).to_have_css("box-shadow", "none")
+                assert scroll.bounding_box()["width"] == pytest.approx(outer["width"] - 4)
+                if width < 400:
+                    assert scroll.evaluate("el => el.scrollWidth > el.clientWidth")
+                    scroll.evaluate("el => el.scrollLeft = 60")
+                    assert scroll.evaluate("el => el.scrollLeft") > 0
+                if kind == "table":
+                    cells = details.locator("tr").first.locator("th")
+                    expect(cells.first).to_have_css("border-top-width", "0px")
+                    expect(cells.first).to_have_css("border-left-width", "0px")
+                    expect(cells.last).to_have_css("border-right-width", "0px")
+                elif source == "pym":
+                    button = details.get_by_role("button", name="Copy code to clipboard")
+                    expect(button).to_be_visible()
+            summary.focus()
+            summary.press("Enter")
+            expect(details).not_to_have_attribute("open")
+            expect(content.first).not_to_be_visible()
+            summary.press("Space")
+            expect(details).to_have_attribute("open", "")
+            expect(content.first).to_be_visible()
+    expect(page.locator("#raw-text")).to_have_attribute("data-details-layout", "padded")
+    assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+
+
+@pytest.mark.parametrize("width", [1440, 320])
+def test_details_nested_layouts_and_overrides(page, site_url: str, width: int) -> None:
+    page.set_viewport_size({"width": width, "height": 900})
+    page.goto(f"{site_url}/guide/details/")
+    page.evaluate("document.fonts.ready")
+    page.add_style_tag(content="html { scroll-behavior: auto; }")
+    for identifier, layout in (("nested-outer", "flush"), ("nested-inner", "padded"),
+                               ("nested-inherited", "flush"), ("automatic-outer", "padded"),
+                               ("automatic-inner", "flush")):
+        details = page.locator(f"#{identifier}")
+        if identifier.startswith("automatic-"):
+            expect(details).to_have_attribute("data-details-layout", layout)
+        else:
+            expect(details).not_to_have_attribute("data-details-layout")
+        expect(details).to_have_css("padding-left", "0px" if layout == "flush" else "14px")
+        if identifier not in ("nested-outer", "automatic-outer"):
+            expect(details).to_have_css("box-shadow", "none")
+    tabs = page.locator("#nested-outer .tabbed-block")
+    expect(tabs).to_have_attribute("data-tab-layout", "flush")
+    expect(tabs).to_have_css("padding-left", "0px")
+    expect(page.locator("#details-in-tabs .tabbed-block")).to_have_attribute("data-tab-layout", "flush")
+    expect(page.locator("#details-in-tabs details")).to_have_css("padding-left", "14px")
+    outer_summary = page.locator("#automatic-outer > summary")
+    outer_summary.click()
+    expect(page.locator("#automatic-inner > pre")).not_to_be_visible()
+    outer_summary.click()
+    expect(page.locator("#automatic-inner > pre")).to_be_visible()
+    # An explicit class also takes precedence over an existing automatic marker.
+    automatic = page.locator("#pym-code > details")
+    automatic.evaluate("el => el.classList.add('details-padded')")
+    expect(automatic).to_have_css("padding-left", "14px")
+    expect(automatic.locator("pre")).to_have_css("border-left-width", "2px")
+    automatic.evaluate("el => el.classList.remove('details-padded')")
+    expect(automatic).to_have_css("padding-left", "0px")
+    assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+
+
+@pytest.mark.parametrize("width", [1440, 320])
+def test_details_keep_native_padded_fallback_without_javascript(browser, site_url: str, width: int) -> None:
+    context = browser.new_context(java_script_enabled=False, viewport={"width": width, "height": 900})
+    try:
+        page = context.new_page()
+        page.goto(f"{site_url}/guide/details/")
+        page.evaluate("document.documentElement.style.scrollBehavior = 'auto'")
+        for selector in ("#pym-code > details", "#raw-code", "#pym-table > details", "#raw-table",
+                         "#pym-padded-code > details", "#raw-padded-code"):
+            details = page.locator(selector)
+            summary = details.locator(":scope > summary")
+            if details.get_attribute("open") is None:
+                summary.click()
+            content = details.locator(":scope > :not(summary)").first
+            expect(content).to_be_visible()
+            assert content.bounding_box()["x"] == pytest.approx(details.bounding_box()["x"] + 16)
+            assert content.bounding_box()["y"] > summary.bounding_box()["y"] + summary.bounding_box()["height"]
+            if width == 320 and selector in ("#pym-code > details", "#raw-code", "#raw-table"):
+                scroll = details.locator("pre" if "code" in selector else "table")
+                assert scroll.evaluate("el => el.scrollWidth > el.clientWidth")
+                scroll.evaluate("el => el.scrollLeft = 60")
+                assert scroll.evaluate("el => el.scrollLeft") > 0
+            summary.focus()
+            summary.press("Enter")
+            expect(content).not_to_be_visible()
+            summary.press("Space")
+            expect(content).to_be_visible()
+        assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+    finally:
+        context.close()
+
+
+@pytest.mark.parametrize("width", [1440, 320])
+def test_details_explicit_layouts_without_javascript(browser, site_url: str, width: int) -> None:
+    context = browser.new_context(java_script_enabled=False, viewport={"width": width, "height": 900})
+    try:
+        page = context.new_page()
+        page.goto(f"{site_url}/guide/details/")
+        page.evaluate("document.documentElement.style.scrollBehavior = 'auto'")
+        for source in ("pym", "raw"):
+            for kind, inset in (("padded-code", 14), ("padded-table", 14),
+                                ("flush-code", 0), ("flush-table", 0), ("flush-mixed", 0)):
+                fixture = page.locator(f"#{source}-{kind}")
+                details = fixture if source == "raw" else fixture.locator(":scope > details")
+                content = details.locator(":scope > :not(summary)").first
+                bounds = details.bounding_box()
+                assert content.bounding_box()["x"] == pytest.approx(bounds["x"] + 2 + inset)
+                summary = details.locator(":scope > summary")
+                summary_bounds = summary.bounding_box()
+                assert content.bounding_box()["y"] == pytest.approx(
+                    summary_bounds["y"] + summary_bounds["height"] + inset,
+                )
+                last = details.locator(":scope > :not(summary)").last
+                last_bounds = last.bounding_box()
+                assert last_bounds["y"] + last_bounds["height"] == pytest.approx(
+                    bounds["y"] + bounds["height"] - 2 - inset,
+                )
+                for pre in details.locator("pre").all():
+                    expect(pre).to_have_css("padding-left", "20px")
+                    expect(pre).to_have_css("border-top-width", "2px" if inset else "0px")
+                    expect(pre).to_have_css("box-shadow", "none")
+                if kind in ("flush-code", "flush-table"):
+                    scroll = details.locator("pre" if kind == "flush-code" else "table")
+                    assert scroll.bounding_box()["width"] == pytest.approx(bounds["width"] - 4)
+                    if width == 320:
+                        assert scroll.evaluate("el => el.scrollWidth > el.clientWidth")
+                        scroll.evaluate("el => el.scrollLeft = 60")
+                        assert scroll.evaluate("el => el.scrollLeft") > 0
+                if kind == "flush-table":
+                    cells = details.locator("tr").first.locator("th")
+                    expect(cells.first).to_have_css("border-top-width", "0px")
+                    expect(cells.first).to_have_css("border-left-width", "0px")
+                    expect(cells.last).to_have_css("border-right-width", "0px")
+                summary = details.locator(":scope > summary")
+                summary.focus()
+                summary.press("Enter")
+                expect(content).not_to_be_visible()
+                summary.press("Space")
+                expect(content).to_be_visible()
+        for identifier, inset in (("nested-outer", 0), ("nested-inner", 14), ("nested-inherited", 0)):
+            details = page.locator(f"#{identifier}")
+            child = details.locator(":scope > :not(summary)").first
+            assert child.bounding_box()["x"] == pytest.approx(details.bounding_box()["x"] + 2 + inset)
+        # Details overrides do not change the no-JavaScript padded tab fallback.
+        expect(page.locator("#nested-outer .tabbed-block")).to_have_css("padding-left", "20px")
+        assert page.evaluate("document.documentElement.scrollWidth <= window.innerWidth")
+    finally:
+        context.close()
+
+
 def test_trademark_glyph_uses_theme_colors(page, site_url: str) -> None:
     page.goto(site_url)
     badge = page.locator(".brand-trademark")