From c4a99d9915e2f9fa9ef7ec634f5f73c2beb9d77b Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Fri, 30 Oct 2026 12:13:10 -0700
Subject: [PATCH] fix(workspace): mark the sticky chrome's concept overlays and
 stub the observer in the bar's unit test (#531)

---
 tests/js/workspace-images-selection.test.js |  6 +++++-
 web/js/workspace/workspace.css              | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/tests/js/workspace-images-selection.test.js b/tests/js/workspace-images-selection.test.js
index 4590bc4c..8d278c9e 100644
--- a/tests/js/workspace-images-selection.test.js
+++ b/tests/js/workspace-images-selection.test.js
@@ -69,8 +69,12 @@ function fakeDOM() {
         createElement: tag => new Element(tag),
         createTextNode: text => Object.assign(new Element('#text'), { _text: String(text) }),
         getElementById: id => (id === 'workspace-toast' ? toast : null),
+        documentElement: { style: { setProperty() {}, removeProperty() {} } },
     };
-    return { Element, body, toast, restore() { globalThis.document = previous; } };
+    // The bar publishes its height for the sticky chrome (D186); nothing in this DOM ever resizes.
+    const previousObserver = globalThis.ResizeObserver;
+    globalThis.ResizeObserver = class { observe() {} disconnect() {} };
+    return { Element, body, toast, restore() { globalThis.document = previous; globalThis.ResizeObserver = previousObserver; } };
 }
 
 /** The bar over `items` with `checked` keys; `options` adds the collection props. */
diff --git a/web/js/workspace/workspace.css b/web/js/workspace/workspace.css
index 08bd8df8..661f87f7 100644
--- a/web/js/workspace/workspace.css
+++ b/web/js/workspace/workspace.css
@@ -512,13 +512,13 @@ pre.prompt-text { font: inherit; font-size: 12px; line-height: 1.75; margin-bloc
    column the bar is one row that scrolls sideways, so it does not take a fifth of a phone screen. */
 #bulkbar, #library-bulkbar { position: sticky; inset-block-start: 8px; z-index: 5; }
 :is(#image-grid, .library-grid) :is(article, a, button, input, select, textarea, [tabindex]) { scroll-margin-block-start: var(--selection-bar-block, 0px); }
-.detail-panel { inset-block-start: max(20px, var(--selection-bar-block, 0px)); max-block-size: calc(100dvh - 20px - max(20px, var(--selection-bar-block, 0px))); }
+.detail-panel { inset-block-start: max(20px, var(--selection-bar-block, 0px)); max-block-size: calc(100dvh - 20px - max(20px, var(--selection-bar-block, 0px))); /* D186 */ }
 @media (max-width: 700px) {
-    .detail-panel { max-block-size: none; }
-    .bulkbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
-    .bulkbar > * { flex: none; }
+    .detail-panel { max-block-size: none; /* D186 */ }
+    .bulkbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; /* D186 */ }
+    .bulkbar > * { flex: none; /* D186 */ }
 }
-@container images-page (inline-size < 600px) { .detail-panel { max-block-size: none; } }
+@container images-page (inline-size < 600px) { .detail-panel { max-block-size: none; /* D186 */ } }
 
 /* D187 (#531, beyond the concept): Back to top, in the toast's column. It rests above a two-line toast, so the usual
    toast does not move it under a finger, and rises only for a taller one. */