From cd5cdd95304c863f5459aa491c9c72431aa37777 Mon Sep 17 00:00:00 2001
From: Florian Berthold <florian.berthold@sub-net.at>
Date: Fri, 1 May 2026 15:39:10 +0200
Subject: [PATCH] embed: drop body bg + use inline-flex so iframe content fits
 its width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Embedded talent builders (e.g. on classic.exil.es Sub's Bear) showed a
wide dark grey "border" inside the iframe — that was the page's
background (#1e1e1e) showing on either side of the trees, which are
fixed-width. In embed mode:

* Set body/html background to transparent so the host page background
  shines through where the trees don't extend.
* Switch the trees container from flex (which stretches) to inline-flex
  (which shrinks to fit), so the iframe can be sized loosely without
  introducing visible empty space.
---
 talent-builder/src/components/TalentBuilder.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/talent-builder/src/components/TalentBuilder.tsx b/talent-builder/src/components/TalentBuilder.tsx
index c744089..2ec079d 100644
--- a/talent-builder/src/components/TalentBuilder.tsx
+++ b/talent-builder/src/components/TalentBuilder.tsx
@@ -53,6 +53,20 @@ export function TalentBuilder() {
     return params.get("embed") === "true";
   });
 
+  // In embed mode, drop the page chrome so the host page background shows
+  // through (no dark "border" around the trees inside the iframe).
+  useEffect(() => {
+    if (!embedMode) return;
+    const prevBg = document.body.style.background;
+    const prevHtmlBg = document.documentElement.style.background;
+    document.body.style.background = "transparent";
+    document.documentElement.style.background = "transparent";
+    return () => {
+      document.body.style.background = prevBg;
+      document.documentElement.style.background = prevHtmlBg;
+    };
+  }, [embedMode]);
+
   // Capture initial build param once (check iframe parent if needed)
   useEffect(() => {
     let buildParam = new URLSearchParams(window.location.search).get("build");
@@ -235,7 +249,7 @@ export function TalentBuilder() {
   // In embed mode, render only the talent trees (no controls)
   if (embedMode) {
     return (
-      <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
+      <div style={{ display: "inline-flex", gap: 24, flexWrap: "wrap" }}>
         {spec.trees.map((t, ti) => {
           const treePoints = getTreePoints(ti);
           // Hide trees with zero points