Responsive timeline layout: mobile legend below chart, orientation-aware breakpoints

- Move timeline legend from vertical top-right to horizontal bottom on portrait phones (<=850px + portrait)
- Landscape phones and tablets use desktop layout (vertical legend on right)
- CSS: cap chart-wrapper height with min(Xvw, calc(100dvh - 130px)) to prevent landscape overflow
- CSS: timeline-mode fills viewport height in portrait for better space utilization
- Rotate x-axis month labels to -90° on mobile for cleaner vertical display
- Add debounced resize handler to re-render on orientation/breakpoint changes
- Guard zrender click handler with y-bounds to prevent legend-zone false positives

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app.js

@@ -658,7 +658,7 @@ function buildTimelineOption(drillPath) {
             show: true,
             position: 'top',
             formatter: (params) => Math.round(totalPerMonth[params.dataIndex] / 1000) + 'к',
-            fontSize: 14,
+            fontSize: (window.innerWidth <= 850 && window.innerHeight > window.innerWidth) ? 12 : 14,
             fontWeight: 'bold',
             fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif',
             color: '#666'
@@ -670,12 +670,14 @@ function buildTimelineOption(drillPath) {
 
 
     const isDrilled = drillPath.length > 0;
+    const isMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
+
     const chartTitle = isDrilled ? {
         text: '← ' + drillPath.join(' › '),
         left: 'center',
         top: 6,
         textStyle: {
-            fontSize: 22,
+            fontSize: isMobile ? 16 : 22,
             fontWeight: 'bold',
             fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif',
             color: '#333'
@@ -683,13 +685,15 @@ function buildTimelineOption(drillPath) {
         triggerEvent: true
     } : { show: false };
 
-    const legendTop = isDrilled ? 42 : 10;
+    const legendItemWidth = isMobile ? 10 : 12;
-    const legendRight = 10;
+    const legendItemHeight = isMobile ? 10 : 12;
-    const legendItemWidth = 12;
+    const legendItemGap = isMobile ? 6 : 8;
-    const legendItemHeight = 12;
+    const legendPadding = isMobile ? [4, 8] : [8, 12];
-    const legendItemGap = 8;
+    const legendFontSize = isMobile ? 11 : 13;
-    const legendPadding = [8, 12];
+
-    const legendFontSize = 13;
+    const legendPosition = isMobile
+        ? { bottom: 20, left: 'center' }
+        : { top: isDrilled ? 42 : 10, right: 10 };
 
     return {
         backgroundColor: '#fff',
@@ -697,29 +701,28 @@ function buildTimelineOption(drillPath) {
         tooltip: { show: false },
         legend: {
             data: legendData,
-            top: legendTop,
+            ...legendPosition,
-            right: legendRight,
+            orient: isMobile ? 'horizontal' : 'vertical',
-            orient: 'vertical',
             itemWidth: legendItemWidth,
             itemHeight: legendItemHeight,
             textStyle: { fontSize: legendFontSize },
             itemGap: legendItemGap,
-            backgroundColor: 'rgba(255,255,255,0.85)',
+            backgroundColor: isMobile ? 'transparent' : 'rgba(255,255,255,0.85)',
-            borderRadius: 6,
+            borderRadius: isMobile ? 0 : 6,
             padding: legendPadding,
             selector: false
         },
         grid: {
-            left: 30,
+            left: isMobile ? 10 : 30,
-            right: 180,
+            right: isMobile ? 25 : 180,
-            top: isDrilled ? 55 : 40,
+            top: isMobile ? (isDrilled ? 40 : 10) : (isDrilled ? 55 : 40),
-            bottom: 30,
+            bottom: isMobile ? 100 : 30,
             containLabel: true
         },
         xAxis: {
             type: 'category',
             data: xLabels,
-            axisLabel: { fontSize: 13, rotate: -45 }
+            axisLabel: { fontSize: isMobile ? 11 : 13, rotate: isMobile ? -90 : -45 }
         },
         yAxis: {
             type: 'value',
@@ -728,15 +731,17 @@ function buildTimelineOption(drillPath) {
                     if (val >= 1000) return Math.round(val / 1000) + 'к\u202F₽';
                     return val;
                 },
-                fontSize: 13
+                fontSize: isMobile ? 11 : 13
             }
         },
         series: seriesList,
         _seriesDataMap: seriesDataMap,
         _monthCount: months.length,
         _legendLayout: {
-            top: legendTop,
+            isMobile: isMobile,
-            right: legendRight,
+            orient: isMobile ? 'horizontal' : 'vertical',
+            top: legendPosition.top,
+            right: legendPosition.right,
             itemWidth: legendItemWidth,
             itemHeight: legendItemHeight,
             itemGap: legendItemGap,
@@ -747,10 +752,12 @@ function buildTimelineOption(drillPath) {
 }
 
 let timelineDrillPath = [];
+let _lastTimelineMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
 
 // Render (or re-render) the timeline chart, optionally drilled into a category path
 // historyAction: 'push' (default, user drill-down), 'replace' (initial/view switch), 'none' (popstate restore)
 function renderTimelineChart(drillPath, historyAction, legendSelected) {
+    _lastTimelineMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
     drillPath = drillPath || [];
     historyAction = historyAction || 'push';
     timelineDrillPath = drillPath;
@@ -851,27 +858,77 @@ function renderTimelineChart(drillPath, historyAction, legendSelected) {
                 allSelected = false;
             }
         });
-        const legendFont = `${legendLayout.fontSize}px sans-serif`;
         const resetFontSize = Math.max(11, legendLayout.fontSize - 1);
-        const resetFont = `${resetFontSize}px sans-serif`;
+
+        const resetLegendSelection = function() {
+            window._suppressLegendHistory = true;
+            allNames.forEach(name => {
+                myChart.dispatchAction({ type: 'legendSelect', name: name });
+            });
+            window._suppressLegendHistory = false;
+            const resetSelected = {};
+            allNames.forEach(name => { resetSelected[name] = true; });
+            updateTotalsAndResetBtn(resetSelected);
+            history.pushState({ timelineDrill: drillPath }, '');
+        };
+        window._timelineResetLegend = allSelected ? null : resetLegendSelection;
+
+        const resetGraphic = {
+            type: 'text',
+            id: 'resetBtn',
+            z: 100,
+            zlevel: 1,
+            style: {
+                text: allSelected ? '' : '× сбросить',
+                fontSize: resetFontSize,
+                fill: '#999',
+                fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif'
+            },
+            cursor: 'pointer',
+            onmouseover: function() {
+                if (this && this.setStyle) this.setStyle({ fill: '#000' });
+            },
+            onmouseout: function() {
+                if (this && this.setStyle) this.setStyle({ fill: '#999' });
+            },
+            onclick: resetLegendSelection
+        };
+
+        const legendView = (myChart._componentsViews || []).find(v => v && v.__model && v.__model.mainType === 'legend');
+
+        if (legendLayout.isMobile) {
+            // Mobile: center reset button below horizontal legend
+            let resetTop;
+            if (legendView && legendView.group) {
+                const groupRect = legendView.group.getBoundingRect();
+                resetTop = legendView.group.y + groupRect.y + groupRect.height + 2;
+            }
+            resetGraphic.left = 'center';
+            if (resetTop !== undefined) {
+                resetGraphic.top = resetTop;
+            } else {
+                resetGraphic.bottom = 2;
+            }
+        } else {
+            // Desktop: position below vertical legend, left-aligned with legend box
+            const legendFont = `${legendLayout.fontSize}px sans-serif`;
             const resetXOffset = 3;
             const maxLegendTextWidth = allNames.reduce((maxWidth, name) => {
                 return Math.max(maxWidth, echarts.format.getTextRect(name, legendFont).width);
             }, 0);
-        const iconTextGap = 5; // ECharts default icon/text gap for legend items
+            const iconTextGap = 5;
             const legendBoxWidth =
                 legendLayout.padding[1] * 2 +
                 legendLayout.itemWidth +
                 iconTextGap +
                 maxLegendTextWidth;
-        const resetTextWidth = echarts.format.getTextRect('× сбросить', resetFont).width;
+            const resetTextWidth = echarts.format.getTextRect('× сбросить', `${resetFontSize}px sans-serif`).width;
             const resetRight =
                 legendLayout.right +
                 legendBoxWidth -
                 legendLayout.padding[1] -
                 resetTextWidth -
                 resetXOffset;
-        const legendView = (myChart._componentsViews || []).find(v => v && v.__model && v.__model.mainType === 'legend');
             const resetLeft = legendView && legendView.group ? legendView.group.x : null;
             let resetTop;
             if (legendView && legendView.group && legendView._contentGroup) {
@@ -896,46 +953,13 @@ function renderTimelineChart(drillPath, historyAction, legendSelected) {
                     allNames.length * (legendLayout.itemHeight + legendLayout.itemGap);
                 resetTop = nextRowTop + 11;
             }
-
+            resetGraphic.top = resetTop;
-        const resetLegendSelection = function() {
-            window._suppressLegendHistory = true;
-            allNames.forEach(name => {
-                myChart.dispatchAction({ type: 'legendSelect', name: name });
-            });
-            window._suppressLegendHistory = false;
-            const resetSelected = {};
-            allNames.forEach(name => { resetSelected[name] = true; });
-            updateTotalsAndResetBtn(resetSelected);
-            history.pushState({ timelineDrill: drillPath }, '');
-        };
-        window._timelineResetLegend = allSelected ? null : resetLegendSelection;
-
-        const resetGraphic = {
-            type: 'text',
-            id: 'resetBtn',
-            top: resetTop,
-            z: 100,
-            zlevel: 1,
-            style: {
-                text: allSelected ? '' : '× сбросить',
-                fontSize: resetFontSize,
-                fill: '#999',
-                fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif'
-            },
-            cursor: 'pointer',
-            onmouseover: function() {
-                if (this && this.setStyle) this.setStyle({ fill: '#000' });
-            },
-            onmouseout: function() {
-                if (this && this.setStyle) this.setStyle({ fill: '#999' });
-            },
-            onclick: resetLegendSelection
-        };
             if (resetLeft !== null) {
                 resetGraphic.left = resetLeft + resetXOffset;
             } else {
                 resetGraphic.right = resetRight;
             }
+        }
 
         myChart.setOption({
             series: [{ name: '__total__', label: {
@@ -997,8 +1021,8 @@ function renderTimelineChart(drillPath, historyAction, legendSelected) {
     window._timelineZrLabelHandler = function(e) {
         const y = e.offsetY;
         const yBottom = myChart.convertToPixel({yAxisIndex: 0}, 0);
-        // Click must be below the bar area (in the label zone)
+        // Click must be below the bar area (in the label zone) but above the legend
-        if (y > yBottom + 5) {
+        if (y > yBottom + 5 && y < yBottom + 60) {
             const x = e.offsetX;
             // Find nearest bar index
             let bestIdx = -1, bestDist = Infinity;
@@ -2709,11 +2733,29 @@ async function initVisualization() {
 initVisualization();
 
 // Handle window resize
+let _resizeDebounceTimer = null;
 window.addEventListener('resize', function() {
     if (currentView === 'month') {
         adjustChartSize();
     }
     myChart.resize();
+
+    // Re-render timeline when crossing the mobile breakpoint
+    if (currentView === 'timeline') {
+        const nowMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
+        if (nowMobile !== _lastTimelineMobile) {
+            _lastTimelineMobile = nowMobile;
+            clearTimeout(_resizeDebounceTimer);
+            _resizeDebounceTimer = setTimeout(function() {
+                const currentOption = myChart.getOption();
+                const legendSelected = currentOption && currentOption.legend
+                    && currentOption.legend[0] && currentOption.legend[0].selected
+                    ? currentOption.legend[0].selected
+                    : null;
+                renderTimelineChart(timelineDrillPath, 'replace', legendSelected);
+            }, 150);
+        }
+    }
 });
 
 // Function to adjust chart size based on screen width

styles.css

@@ -449,7 +449,7 @@ body {
 
     .chart-wrapper {
         width: 100%;
-        height: 90lvw;
+        height: min(90lvw, calc(100dvh - 130px));
     }
 
     #details-box {
@@ -465,6 +465,7 @@ body {
 
     .container.timeline-mode .chart-wrapper {
         width: 100%;
+        height: calc(100dvh - 130px);
     }
 
     .top-item-amount {
@@ -536,7 +537,7 @@ body {
     }
 
     .chart-wrapper {
-        height: 95vw;
+        height: min(95vw, calc(100dvh - 130px));
     }
 
     #chart-container {
@@ -571,7 +572,7 @@ body {
     }
 
     .chart-wrapper {
-        height: 100vw;
+        height: min(100vw, calc(100dvh - 130px));
     }
 
     .details-header {