v0.12.0-hotfix2

FILE_MANIFEST.sha256

@@ -181,15 +181,15 @@ df2f13c98b9d7f84916dcbf9e01a479a6f392f888413fe22bae586526747f704  ./src/state.rs
 b92a6cb158b494fe145b43c7641e65f6fafff47201d7d76edbec2cfd8b94835c  ./systemd/gree-controller.service
 544a31cb2e5374227026afd6abd0d910381f3fca1638154ebd74e3c3d96a35d1  ./web/404.html
 e98bdd7204349cce1ec6f57283509697af0bbc72280622a6c3efa6fed242db4f  ./web/favicon.svg
-9823c29bea94c754d3596464eb1f3e51b7a85e363113b6511d3d292596297de0  ./web/index.html
+1f3abc20b7373fbb8995fe4331d5b448afb3e8c5a8722b3b0417cb89c684f3de  ./web/index.html
 9ba3f6fa05b72aa989139b2a909982571b2a02055052e4c40104f1e81a9aa7eb  ./web/js/README.md
 8fb20fdba11df68feb0b096bb5b4c8f936db974aed5d345a0d01455054f31f95  ./web/js/bootstrap.js
-2e3c9e0f15097055bb420f619ff1ce5004fdb279efe7163ec4d03791ff4b7300  ./web/js/charts.js
+7dcf8d722407ce0b73dbcfc4982a2a2f3ad5fa82eb9ece227ad850f2117e3d76  ./web/js/charts.js
 f75449450a179f5853b8b08c69dec93205985e0dcbc806d355fd6060237761f6  ./web/js/core.js
 dfc123885a9b6b5c1d07c12d2d2625ff15aa0844e5cd3736092ccd0a360da39c  ./web/js/dashboard.js
 563ce41a849574ddfbed281828f34cdcb498bbd04009056c73a378b84bad822a  ./web/js/entities.js
 e332b3f811958a938105272c1e8e28d6ca8ba69303001da165b4b0b85727695c  ./web/js/events.js
-66b982f7ae6b0bdf0d9658ba66cc52da4e546de95b9335e0f069f99a96f67129  ./web/js/flows.js
+1b21b3ae43a6848f9fc13fd4eacaa6a1a50d44c65aa37ca737be60aa4eca8a38  ./web/js/flows.js
 f06557c6d338259059b990f8f79c91d68ac8ec1f245c302468f08929b5506901  ./web/js/forms.js
 dbf36223863ba882c03eccea4516ba8db7acf0c2e72c6c64490cb994f1e20f96  ./web/js/history.js
 7eaa04992ea828dc89f5eaebf674cbbfd160f53eb8d0d6ef0d4e47bd8c28c435  ./web/js/main.js
@@ -199,6 +199,6 @@ c8c82e88c3715b1bfabf155e36266a4c94f5e2fc03eb39dcdd9d08a1985a997c  ./web/js/route
 427376a35832cb3644206c6e89e1654bd807eec78352f80bd0dd43f74b4ec810  ./web/js/settings-ui.js
 9dd9fbcc5f00584562bae6a840189495f830d1086d9679763dbad6e9c18c4fdb  ./web/js/settings.js
 6b653e4fe2d4db4ffae6ff8f39b8ce57a10a990dc0000ee4aae51d949afadd52  ./web/manifest.webmanifest
-8f7e04845348725f3531abc6d045914470c77bc9b22df896d09bc3b539f1a2e9  ./web/styles.css
+08e3301706c2ec3ec642dd9c3fc1f8cc1c12ad30113d98fc77ade35bd827d947  ./web/styles.css
 ae1b03f30b494f474a781a5d32072f1e73eba2b7c768109fc1cc8028cb6662a4  ./web/sw.js
 d505d793ce7cc9485b45b78bba1c0d51887adc7451ab59a42702946e5b991382  ./web/theme-init.js

web/index.html

@@ -868,7 +868,7 @@
               data-i18n-title="flow.zoomOut" title="Zoom out">−</button><span id="flowZoomLabel"
               aria-live="polite">100%</span><button type="button" class="secondary icon-button"
               data-action="flow-zoom-in" data-i18n-title="flow.zoomIn" title="Zoom in">＋</button><button type="button"
-              class="secondary flow-fit-button" data-action="flow-fit" data-i18n="flow.fitView">Fit</button></div>
+              class="secondary flow-fit-button" data-action="flow-fit" data-i18n="flow.fitView" data-i18n-title="flow.fitView" title="Fit">Fit</button></div>
         </div>
         <div id="flowWorkspace" class="flow-workspace" tabindex="0">
           <div id="flowCanvas" class="flow-canvas"><svg id="flowEdges" class="flow-edges" aria-hidden="true"></svg>

web/js/charts.js

@@ -173,6 +173,11 @@ function toggleChartFullscreen(id) {
 
   card.classList.add('chart-fullscreen-fallback');
   document.body.classList.add('chart-fullscreen-open');
+  if (window.matchMedia('(max-width: 760px)').matches) {
+    app.chartZooms[id] = 1;
+    canvas.dataset.chartZoom = '1';
+    if (canvas.parentElement) canvas.parentElement.scrollLeft = 0;
+  }
   updateChartFullscreenButton(card);
   requestAnimationFrame(() => redrawHistoryChart(id));
 }
@@ -183,11 +188,12 @@ function prepareCanvas(canvas, height) {
   const wrapWidth = Math.floor(wrap?.clientWidth || rect.width || 720);
   const card = canvas.closest('.history-chart-card');
   const fullscreen = chartCardIsFullscreen(card);
-  const fullscreenHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
+  const mobileFullscreen = fullscreen && window.matchMedia('(max-width: 760px)').matches;
-  const actualHeight = fullscreenHeight || height;
+  const wrapHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
-  const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
+  const naturalMobileHeight = Math.round(clamp(wrapWidth * .72, 260, 360));
-  // Regular charts keep a useful minimum plotting width and may scroll horizontally.
+  const actualHeight = mobileFullscreen ? Math.min(wrapHeight || naturalMobileHeight, naturalMobileHeight) : (wrapHeight || height);
-  // In fullscreen, 100% zoom must fit the available viewport instead of forcing 720px.
+  const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, MAX_CHART_ZOOM);
+  // Normal charts may scroll horizontally. Fullscreen 100% always fits the viewport width.
   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;
@@ -449,7 +455,8 @@ function drawLineChart(canvas, series, rows, { height = 340, minValue = null, ma
   const { ctx, width } = prepared;
   height = prepared.height;
   const text = cssColor('--muted', '#888'), grid = cssColor('--grid', '#333');
-  const pad = { left: 54, right: 20, top: 20, bottom: 42 };
+  const compactPlot = width < 520;
+  const pad = compactPlot ? { left: 43, right: 12, top: 16, bottom: 34 } : { left: 54, right: 20, top: 20, bottom: 42 };
   const allValues = [];
   visibleSeries.forEach(item => sortedRows.forEach(row => { const value = item.value(row); if (Number.isFinite(value)) allValues.push(value); }));
   if (!allValues.length) return drawEmptyChart(canvas, height);
@@ -467,7 +474,7 @@ function drawLineChart(canvas, series, rows, { height = 340, minValue = null, ma
     ctx.beginPath(); ctx.moveTo(pad.left, py); ctx.lineTo(width - pad.right, py); ctx.stroke();
     ctx.textAlign = 'right'; ctx.fillText(binaryLabels ? value.toFixed(0) : `${value.toFixed(1)}°`, pad.left - 8, py + 3);
   }
-  const ticks = 5;
+  const ticks = width < 420 ? 2 : width < 620 ? 3 : 5;
   for (let i = 0; i <= ticks; i++) {
     const idx = Math.min(sortedRows.length - 1, Math.round(i * (sortedRows.length - 1) / ticks)); const px = x(sortedRows[idx]);
     ctx.textAlign = 'center'; ctx.fillText(timeLabel(sortedRows[idx].timestamp, $('#historyHours')?.value), px, height - 14);

web/js/flows.js

@@ -365,7 +365,7 @@ function renderFlowSaveStatus() {
 }
 
 function setFlowZoom(value, { render = true } = {}) {
-  const next = clamp(Number(value) || 1, .2, 1.35);
+  const next = clamp(Number(value) || 1, .1, 1.35);
   app.flowZoom = Math.round(next * 20) / 20;
   const canvas = $('#flowCanvas');
   if (canvas) canvas.style.zoom = String(app.flowZoom);
@@ -379,40 +379,43 @@ function fitFlowToView({ maxZoom = 1 } = {}) {
   const nodes = app.flowDraft?.nodes || [];
   if (!workspace || !nodes.length) {
     setFlowZoom(1);
-    if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'auto' });
     return;
   }
 
-  const nodeWidth = 170, fallbackHeight = 96, pad = 48;
+  const compactViewport = window.matchMedia('(max-width: 900px), (max-height: 700px)').matches;
+  const nodeWidth = 170, fallbackHeight = 96, pad = compactViewport ? 24 : 48;
   const bounds = nodes.map(node => {
     const element = $(`[data-flow-node="${CSS.escape(node.id)}"]`);
     return {
-      left: Number(node.x || 0),
+      left: Number.isFinite(Number(element?.offsetLeft)) ? Number(element.offsetLeft) : Number(node.x || 0),
-      top: Number(node.y || 0),
+      top: Number.isFinite(Number(element?.offsetTop)) ? Number(element.offsetTop) : 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 minX = Math.min(...bounds.map(item => item.left)) - pad;
-  const minY = Math.max(0, Math.min(...bounds.map(item => item.top)) - pad);
+  const minY = 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(80, workspace.clientWidth - 20);
+  const availableW = Math.max(80, workspace.clientWidth - (compactViewport ? 12 : 20));
-  const availableH = Math.max(80, workspace.clientHeight - 20);
+  const availableH = Math.max(80, workspace.clientHeight - (compactViewport ? 12 : 20));
-  const rawZoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), .2, 1.35);
+  const minZoom = compactViewport ? .1 : .2;
-  const zoom = Math.max(.2, Math.floor(rawZoom * 20) / 20);
+  const rawZoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), minZoom, 1.35);
+  const zoom = Math.max(minZoom, Math.floor(rawZoom * 20) / 20);
   setFlowZoom(zoom);
 
-  requestAnimationFrame(() => {
+  requestAnimationFrame(() => 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',
+      behavior: 'auto',
     });
-  });
+    renderFlowEdges();
+  }));
 }
 
 function renderFlowBlockLibrary(filter = '') {

web/styles.css

@@ -9586,3 +9586,208 @@ body.chart-fullscreen-open::before {
     grid-template-columns: 1fr;
   }
 }
+
+/* Mobile UX correction pass: explicit left alignment, compact Flow fit control, natural chart fullscreen. */
+@media (max-width: 700px) {
+  #controlPlanSection .dashboard-section-head.compact-head {
+    display: block;
+    width: 100%;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+
+  #controlPlanSection .dashboard-section-head.compact-head > div:first-child {
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+  }
+
+  #controlPlanSection .dashboard-section-head.compact-head .eyebrow,
+  #controlPlanSection .dashboard-section-head.compact-head h2 {
+    text-align: left;
+  }
+}
+
+@media (max-width: 900px) {
+  .flow-workspace-toolbar {
+    gap: 6px;
+    padding-inline: 7px;
+  }
+
+  .flow-workspace-primary-actions {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .flow-add-block-button {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .flow-zoom-controls {
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .flow-zoom-controls > span {
+    display: none;
+  }
+
+  .flow-fit-button {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 36px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0 !important;
+    line-height: 1;
+  }
+
+  .flow-fit-button::before {
+    content: "⤢";
+    display: block;
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+
+@media (orientation: landscape) and (max-height: 700px) {
+  .flow-workspace-toolbar {
+    gap: 6px;
+    padding-inline: 7px;
+  }
+
+  .flow-workspace-primary-actions {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .flow-add-block-button {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .flow-zoom-controls {
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .flow-zoom-controls > span {
+    display: none;
+  }
+
+  .flow-fit-button {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 36px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0;
+    overflow: hidden;
+    font-size: 0 !important;
+    line-height: 1;
+  }
+
+  .flow-fit-button::before {
+    content: "⤢";
+    display: block;
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+
+@media (max-width: 760px) {
+  .history-chart-card.chart-fullscreen-fallback {
+    width: calc(100vw - 8px);
+    height: calc(100dvh - 8px);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+    border-radius: 12px;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-title-row {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-title-row h3 {
+    font-size: 16px;
+    line-height: 1.25;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .chart-wrap {
+    flex: 0 0 auto;
+    width: 100%;
+    height: clamp(280px, 45dvh, 430px);
+    min-height: 0;
+    max-height: 430px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    gap: 5px;
+    width: 100%;
+    max-height: 42px;
+    margin: 0;
+    padding-bottom: 2px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    overscroll-behavior-inline: contain;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend::-webkit-scrollbar {
+    display: none;
+  }
+
+  .history-chart-card.chart-fullscreen-fallback .legend-item {
+    flex: 0 0 auto;
+    min-height: 32px;
+    padding: 4px 7px;
+    white-space: nowrap;
+  }
+}
+
+/* In phone landscape there is enough width: keep the full Fit label instead of clipping it. */
+@media (orientation: landscape) and (max-height: 700px) and (min-width: 500px) {
+  .flow-fit-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-basis: auto;
+    width: auto;
+    min-width: 78px;
+    padding: 0 10px;
+    font-size: .75rem !important;
+    white-space: nowrap;
+  }
+
+  .flow-fit-button::before {
+    display: none;
+    content: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .history-chart-card.chart-fullscreen-fallback .chart-wrap {
+    height: clamp(260px, 38dvh, 360px);
+    max-height: 360px;
+  }
+}