v0.12.0-hotfix1

web/js/charts.js

@@ -182,10 +182,14 @@ function prepareCanvas(canvas, height) {
   const wrap = canvas.parentElement;
   const wrapWidth = Math.floor(wrap?.clientWidth || rect.width || 720);
   const card = canvas.closest('.history-chart-card');
-  const fullscreenHeight = chartCardIsFullscreen(card) ? Math.floor(wrap?.clientHeight || 0) : 0;
-  const actualHeight = Math.max(height, fullscreenHeight || 0);
+  const fullscreen = chartCardIsFullscreen(card);
+  const fullscreenHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
+  const actualHeight = fullscreenHeight || height;
   const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
-  const width = Math.max(720, Math.floor(Math.max(720, wrapWidth) * zoom));
+  // Regular charts keep a useful minimum plotting width and may scroll horizontally.
+  // In fullscreen, 100% zoom must fit the available viewport instead of forcing 720px.
+  const baseWidth = fullscreen ? Math.max(1, wrapWidth) : Math.max(720, wrapWidth);
+  const width = Math.max(1, Math.floor(baseWidth * zoom));
   const dpr = window.devicePixelRatio || 1;
   canvas.width = width * dpr; canvas.height = actualHeight * dpr;
   canvas.style.width = `${width}px`; canvas.style.height = `${actualHeight}px`;

web/js/flows.js

@@ -365,7 +365,7 @@ function renderFlowSaveStatus() {
 }
 
 function setFlowZoom(value, { render = true } = {}) {
-  const next = clamp(Number(value) || 1, .45, 1.35);
+  const next = clamp(Number(value) || 1, .2, 1.35);
   app.flowZoom = Math.round(next * 20) / 20;
   const canvas = $('#flowCanvas');
   if (canvas) canvas.style.zoom = String(app.flowZoom);
@@ -377,17 +377,42 @@ function setFlowZoom(value, { render = true } = {}) {
 function fitFlowToView({ maxZoom = 1 } = {}) {
   const workspace = $('#flowWorkspace');
   const nodes = app.flowDraft?.nodes || [];
-  if (!workspace || !nodes.length) { setFlowZoom(1); if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'smooth' }); return; }
-  const width = 170, height = 96, pad = 56;
-  const minX = Math.max(0, Math.min(...nodes.map(node => Number(node.x || 0))) - pad);
-  const minY = Math.max(0, Math.min(...nodes.map(node => Number(node.y || 0))) - pad);
-  const maxX = Math.max(...nodes.map(node => Number(node.x || 0) + width)) + pad;
-  const maxY = Math.max(...nodes.map(node => Number(node.y || 0) + height)) + pad;
+  if (!workspace || !nodes.length) {
+    setFlowZoom(1);
+    if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    return;
+  }
+
+  const nodeWidth = 170, fallbackHeight = 96, pad = 48;
+  const bounds = nodes.map(node => {
+    const element = $(`[data-flow-node="${CSS.escape(node.id)}"]`);
+    return {
+      left: Number(node.x || 0),
+      top: Number(node.y || 0),
+      width: Math.max(nodeWidth, Number(element?.offsetWidth || 0)),
+      height: Math.max(fallbackHeight, Number(element?.offsetHeight || 0)),
+    };
+  });
+  const minX = Math.max(0, Math.min(...bounds.map(item => item.left)) - pad);
+  const minY = Math.max(0, Math.min(...bounds.map(item => item.top)) - pad);
+  const maxX = Math.max(...bounds.map(item => item.left + item.width)) + pad;
+  const maxY = Math.max(...bounds.map(item => item.top + item.height)) + pad;
   const contentW = Math.max(1, maxX - minX), contentH = Math.max(1, maxY - minY);
-  const availableW = Math.max(220, workspace.clientWidth - 24), availableH = Math.max(180, workspace.clientHeight - 24);
-  const zoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), .45, 1.35);
+  const availableW = Math.max(80, workspace.clientWidth - 20);
+  const availableH = Math.max(80, workspace.clientHeight - 20);
+  const rawZoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), .2, 1.35);
+  const zoom = Math.max(.2, Math.floor(rawZoom * 20) / 20);
   setFlowZoom(zoom);
-  requestAnimationFrame(() => workspace.scrollTo({ left: Math.max(0, minX * app.flowZoom - 12), top: Math.max(0, minY * app.flowZoom - 12), behavior: 'smooth' }));
+
+  requestAnimationFrame(() => {
+    const centerX = ((minX + maxX) / 2) * app.flowZoom;
+    const centerY = ((minY + maxY) / 2) * app.flowZoom;
+    workspace.scrollTo({
+      left: Math.max(0, centerX - workspace.clientWidth / 2),
+      top: Math.max(0, centerY - workspace.clientHeight / 2),
+      behavior: 'smooth',
+    });
+  });
 }
 
 function renderFlowBlockLibrary(filter = '') {