From af584101eb484abd5b8ef7a455dd571a79fc4c86 Mon Sep 17 00:00:00 2001
From: trilium-share-gruvbox
 <trilium-share-gruvbox@users.noreply.git.familie-zink.org>
Date: Fri, 28 Aug 2026 20:20:48 +0200
Subject: [PATCH] Inline 3D viewers in articles use content width
 (model-viewer-inline); standalone model pages stay full-bleed

---
 docs/embed-3d-model.md     | 5 +++--
 scripts/3d_model_viewer.js | 2 ++
 theme/blog_share_theme.css | 5 +++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/embed-3d-model.md b/docs/embed-3d-model.md
index 4d4e31d..bc0e040 100644
--- a/docs/embed-3d-model.md
+++ b/docs/embed-3d-model.md
@@ -2,8 +2,9 @@
 
 The share can render `.step` / `.stp` / `.stl` models interactively (three.js + occt-import-js,
 hosted locally). The viewer fills the available screen width (full-bleed, ~`100vw`) with a
-height based on the viewport (`min(70vh, 900px)`), so models use the maximum available space
-instead of the readable content width. The caption below the model always shows
+height based on the viewport (`min(70vh, 900px)`), so standalone model pages use the maximum
+available space instead of the readable content width. **Inline viewers embedded in text
+articles** (Options B and C) are limited to the content width (`model-viewer-inline`). The caption below the model always shows
 `<file name> · <size> · <triangle count>` (e.g. `Wrench.stl · 711 KB · 14.6k triangles`).
 
 There are three ways to embed a model, depending on how you store the file.
diff --git a/scripts/3d_model_viewer.js b/scripts/3d_model_viewer.js
index 6c34400..82d5983 100644
--- a/scripts/3d_model_viewer.js
+++ b/scripts/3d_model_viewer.js
@@ -363,6 +363,7 @@
         if (!m) return;
         var href = a.getAttribute("href");
         var el = makeViewer(name);
+        el.classList.add("model-viewer-inline");
         a.replaceWith(el);
         initViewer(el, href, m[0]);
     });
@@ -384,6 +385,7 @@
         var mm = t.match(MODEL_RE);
         if (!mm) return;
         var el = makeViewer(t);
+        el.classList.add("model-viewer-inline");
         a.replaceWith(el);
         initViewer(el, "api/notes/" + art.id + "/download", mm[0]);
     });
diff --git a/theme/blog_share_theme.css b/theme/blog_share_theme.css
index 649ba99..282f161 100644
--- a/theme/blog_share_theme.css
+++ b/theme/blog_share_theme.css
@@ -821,6 +821,11 @@ html.theme-light #content code {
     overflow: hidden;
 }
 
+.model-viewer.model-viewer-inline {
+    width: 100%;
+    margin-left: 0;
+}
+
 .model-viewer-data {
     position: absolute;
     top: 8px;