fix: right-align inline diagram controls

scripts/browser/inline-controls.cjs

@@ -25,6 +25,21 @@ const fs = require('node:fs');
         const box = await frame.locator(`#${id}`).boundingBox();
         assert(box && box.width >= 40 && box.height >= 44, id);
       }
+      const toolbar = await frame.locator('.toolbar').boundingBox();
+      const exportButton = await frame.locator('#btn-export').boundingBox();
+      const diagram = await frame.locator('.diagram-container > svg').boundingBox();
+      const rightGap = toolbar.x + toolbar.width - exportButton.x - exportButton.width;
+      assert(Math.abs(rightGap - 8) < 1, `toolbar right padding at ${width}: ${rightGap}`);
+      assert(diagram.y >= toolbar.y + toolbar.height, 'toolbar must stay above nodes');
+      const checkMenu = async selector => {
+        await frame.locator(selector).evaluate(n => Promise.all(n.getAnimations().map(a => a.finished)));
+        const menu = await frame.locator(selector).boundingBox();
+        const viewport = await iframe.boundingBox();
+        const currentToolbar = await frame.locator('.toolbar').boundingBox();
+        assert(menu && menu.x >= viewport.x - 1 && menu.y >= currentToolbar.y + currentToolbar.height - 1, selector);
+        assert(menu.x + menu.width <= viewport.x + viewport.width + 1, `${selector} clips horizontally`);
+        assert(menu.y + menu.height <= viewport.y + viewport.height + 1, `${selector} clips vertically`);
+      };
       const light = await frame.locator('body').evaluate(n => getComputedStyle(n).backgroundColor);
       await frame.locator('#btn-theme').click(); await theme('dark');
       assert.notEqual(await frame.locator('body').evaluate(n => getComputedStyle(n).backgroundColor), light);
@@ -42,6 +57,7 @@ const fs = require('node:fs');
       await portalTheme('light'); await theme('light');
       for (const preset of ['signal-flow', 'blueprint', 'editorial', 'classic']) {
         await frame.locator('#btn-preset').click();
+        await checkMenu('.preset-menu');
         await frame.locator(`[data-preset-value="${preset}"]`).click();
         assert.equal(await frame.locator('html').getAttribute('data-preset'), preset);
       }
@@ -53,6 +69,7 @@ const fs = require('node:fs');
       const exports = [];
       for (const format of ['png', 'jpeg', 'webp', 'svg', 'svg-light', 'svg-dark', 'webm']) {
         await frame.locator('#btn-export').click();
+        await checkMenu('.export-menu');
         if (format === 'webm' && await frame.locator('[data-format="webm"]').isDisabled()) {
           exports.push({format, unsupported: true});
           await frame.locator('#btn-export').click();
@@ -108,7 +125,7 @@ const fs = require('node:fs');
       await next.scrollIntoViewIfNeeded();
       await (await (await next.elementHandle()).contentFrame()).waitForFunction(() => document.documentElement.dataset.theme === 'dark');
       assert(!await page.evaluate(() => document.documentElement.scrollWidth > innerWidth));
-      results.push({width, themeSync:true, presets:4, exports, fullscreen:true, routeTheme:true});
+      results.push({width, toolbar, rightGap, dropdownsUnclipped:true, themeSync:true, presets:4, exports, fullscreen:true, routeTheme:true});
       fs.writeFileSync(`${output}/results.json`, JSON.stringify(results,null,2));
       await context.close();
     }