From 2237b4acddd65d9ce406c8e1794871eb1c21af8e Mon Sep 17 00:00:00 2001
From: Dion Moult <dion@thinkmoult.com>
Date: Mon, 29 Jun 2026 11:33:14 +1000
Subject: [PATCH] ifcviewer-web: stop the log overlay from covering + blocking
 the canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The status overlay was position:fixed top/left/right with max-height
80vh and pointer-events:auto — a near-fullscreen div that both hid the
model and swallowed mouse events, so orbit drags over most of the canvas
did nothing. Move it to a small bottom-left box, set pointer-events:none
so it never intercepts navigation, and collapse it to a few dimmed lines
once the app goes live (errors re-expand it). It still auto-scrolls to
the newest line.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/ifcviewer-web/shell.html | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/ifcviewer-web/shell.html b/src/ifcviewer-web/shell.html
index ccf2bd85c8..ad64f1aa88 100644
--- a/src/ifcviewer-web/shell.html
+++ b/src/ifcviewer-web/shell.html
@@ -8,12 +8,19 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
   #viewer-canvas { display: block; width: 100vw; height: 100vh; outline: none;
     background: #1a1d24; }
-  #status { position: fixed; top: 8px; left: 12px; right: 12px;
-    max-height: 80vh; overflow-y: auto; font-size: 11px;
+  /* Log overlay sits bottom-left and never eats pointer events (so it
+     can't block orbit drags over the canvas). It auto-scrolls to the
+     newest line. Capped small; collapses further once the app is live. */
+  #status { position: fixed; bottom: 8px; left: 12px;
+    max-width: min(60vw, 680px); max-height: 28vh; overflow-y: auto;
+    font-size: 11px;
     font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
     background: rgba(20,22,28,.78); padding: 6px 10px; border-radius: 4px;
-    white-space: pre-wrap; pointer-events: auto; }
+    white-space: pre-wrap; pointer-events: none; }
+  #status.ready { max-height: 4.5em; opacity: .5; }
   #status.error { background: rgba(120,30,30,.85); color: #fff; }
+  /* Errors re-expand and re-opaque even after the ready-collapse. */
+  #status.ready.error { max-height: 28vh; opacity: 1; }
   #open-btn { position: fixed; top: 8px; right: 12px; z-index: 10;
     background: #2b6cb0; color: #fff; border: none; padding: 6px 12px;
     border-radius: 4px; font-size: 12px; cursor: pointer; }
@@ -63,8 +70,12 @@
       // clean JS top-level, NOT nested inside Dawn-web's Promise.then
       // chain — which is the configuration that stalls device-callback
       // delivery (verified during web bring-up).
+      var collapsedOnce = false;
       function shellTick() {
         if (Module._app_ptr && Module._raf_tick_c) {
+          // First time the app goes live, collapse the log overlay so it
+          // stops covering the viewport.
+          if (!collapsedOnce) { statusEl.classList.add('ready'); collapsedOnce = true; }
           Module._raf_tick_c(Module._app_ptr);
         }
         requestAnimationFrame(shellTick);