diff --git a/web/js/charts.js b/web/js/charts.js
index 446e993..86cab41 100644
--- a/web/js/charts.js
+++ b/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 actualHeight = fullscreenHeight || height;
- const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
- // 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 mobileFullscreen = fullscreen && window.matchMedia('(max-width: 760px)').matches;
+ const wrapHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
+ const naturalMobileHeight = Math.round(clamp(wrapWidth * .72, 260, 360));
+ const actualHeight = mobileFullscreen ? Math.min(wrapHeight || naturalMobileHeight, naturalMobileHeight) : (wrapHeight || height);
+ 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);
diff --git a/web/js/flows.js b/web/js/flows.js
index 7421783..2e0ad3b 100644
--- a/web/js/flows.js
+++ b/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),
- top: Number(node.y || 0),
+ left: Number.isFinite(Number(element?.offsetLeft)) ? Number(element.offsetLeft) : Number(node.x || 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 minY = Math.max(0, Math.min(...bounds.map(item => item.top)) - pad);
+ const minX = Math.min(...bounds.map(item => item.left)) - 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 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);
+ const availableW = Math.max(80, workspace.clientWidth - (compactViewport ? 12 : 20));
+ const availableH = Math.max(80, workspace.clientHeight - (compactViewport ? 12 : 20));
+ const minZoom = compactViewport ? .1 : .2;
+ 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 = '') {
diff --git a/web/styles.css b/web/styles.css
index bbc133f..18f1cb6 100644
--- a/web/styles.css
+++ b/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;
+ }
+}