- Replace safe-area-inset padding with fixed 42px right / 24px left
(safe-area was 59px on both sides of iPhone Pro Max, too aggressive)
- Move center-label/eye-button hiding to height-based media query
covering all landscape phones, not just >851px
- Add compact h1 (24px), smaller month-preview donuts (28px) for
larger landscape phones
- Server: add Cache-Control: no-cache, strip query strings from URLs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Just env(safe-area-inset-*) with 8px fallback — no extra base padding
on top. The inset values already provide sufficient clearance.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
20px + safe-area was too much — the inset alone provides Dynamic Island
clearance, only need minimal base padding.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Chart wrapper 52% (was 58%) for visual separation from details box
- Container padding 20px + safe-area-inset on both sides to clear
Dynamic Island in landscape
- Details box right offset includes safe-area-inset-right
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
For viewports >850px wide but <=500px tall (landscape):
- Hide center label text (month/amount), keep home icon on drill-down
- Wider details panel (40vw), smaller fonts (12-13px)
- Tighter spacing to fit all content without clipping
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 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>
- Add drill-down into subcategories when clicking a category bar
- Use native ECharts emphasis/blur for category highlighting (focus: series)
- Show per-category labels on all bars via dispatchAction highlight
- Display total sum labels (к) above bars, ₽ on y-axis only
- Add color legend at bottom of chart
- Increase font sizes and angle x-axis labels for readability
- Remove details panel from timeline mode
- Clean up label management: no manual setOption race conditions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a second visualization mode showing spending across all months
as a stacked bar chart, with a месяц/таймлайн switcher in the header.
Includes side panel with category breakdowns, bar click-to-drill,
and localStorage persistence of the selected view.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Hold Shift and click months to select multiple, showing aggregated
spending data. Normal click resets to single month selection.
Cannot deselect the last remaining month.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Home icon only appears on narrow screens (≤850px), not desktop
- Added white circular background with subtle shadow for readability
- Icon is larger (28px + padding) for easier touch targeting
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Home icon appears in center only when at least one level deep
- Clicking the icon navigates back to root view
- On narrow screens (≤850px), shows only the home icon (label hidden)
- Black/white styling with hover effect
- Works on both desktop and mobile/touch devices
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use !important to ensure chart eye btn is hidden on narrow (≤850px)
- Always show eye buttons in details panel on narrow layouts (opacity 0.5)
- Touch devices don't have hover, so eyes need to be visible by default
- Desktop (>850px) retains hover behavior for eye icons
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Smaller font sizes on mobile (10px/9px vs 13px/11px on desktop)
- Bolder font weight on mobile (600) for better readability
- Hide chart eye icon on narrow/stacked layouts (≤850px)
- Center chart at 50% when layout is stacked (≤850px)
- Dynamic font size/weight updates on resize
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Scale chart layers on mobile (≤500px) to fill container while
keeping same hole size as desktop (20%)
- Add resize handler to dynamically update proportions when crossing
500px threshold
- Hide center label at 850px (stacked layout) instead of 500px to
prevent overlap with chart
- Center chart at 50% on mobile since details box is below
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Hide center label on screens ≤500px (redundant with details box)
- Increase chart height to 95vw (500px) and 98vw (400px)
- Reduce container padding to minimize white space
- Adjust details box margin and max-height calculation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 500px breakpoint: smaller fonts, tighter spacing, smaller
month buttons and previews, center label adjustments
- Add 400px breakpoint for iPhone 13 (390px): even smaller fonts,
reduced padding, compact details box styling
- Title now fits on one line at all mobile sizes
- Month navigator buttons all visible without cutoff
- Center label scales appropriately for small screens
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use calc() to set details box max-height based on remaining viewport
space after chart (90lvw) and header (~140px). This prevents page
scrolling when hovering items with many subcategories - the details
box scrolls internally instead.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Allow details box to show all categories instead of being cut off
at 300px height on mobile/narrow screens.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
At 1200px and below, reduce chart width to 60% and increase details
box width to 38% (min 340px) to prevent amounts from being truncated.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added chart-wrapper div to contain both chart-container and center-label,
allowing the center-label to be positioned relative to the chart area
regardless of the overall layout (side-by-side or stacked).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move center label from ECharts canvas to HTML overlay for better font rendering
- Style ₽ symbol separately with lighter color (#888) and slightly smaller size (20px)
- Use tighter line height (1.0) for center label
- Remove "Детали" heading from details box, use total as header
- Remove top border from details header
- Increase header font sizes to 20px
- Add more whitespace above "Top Items:"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add fixed subcategory color mapping based on December 2025 data
- Update click handler and transformDrillDownData to use getSubcategoryColor
- Rotate mini-charts 90° clockwise to match main chart orientation
- Change month selector active state from blue to neutral gray (#4a4a4a)
- Ensure colors stay consistent when switching months while drilled down
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Switch to SF Pro / system font stack for consistent ₽ rendering
- Apply font to both HTML and ECharts center text
- Reset chart highlight and details panel when closing modal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add custom column sorting (click headers to sort, click again to reverse)
- Add row click to open detail modal showing all transaction fields
- Row detail modal uses table layout with labels and values side by side
- Always show scrollbars, reset scroll position when modal opens
- Global escape key handler closes detail modal first, then main modal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed from always visible (50% opacity) to hover-only behavior,
matching the eye buttons in the items list below.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace "Total" with the current month name (e.g., "Декабрь")
- Add eye icon to header that opens modal with all transactions
- Header eye button is always visible (50% opacity)
- When hovering a sector, header shows sector name with eye button
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove inline display:none from HTML (was overriding opacity)
- Set initial pointer-events:none in CSS to prevent blocking clicks
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed inactivity timeout from 1 second to 0.5 seconds
- Added smooth 0.2s ease-out opacity transition for gradual fade
- Switched from display:none to opacity for smoother hide effect
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add eye icon that appears when hovering over chart sectors
- Position button at inner edge for left-side sectors, outer edge for right-side
- Click eye button to open transaction details modal
- Maintain sector highlight and details panel when hovering over button
- Override chart cursor to only show pointer on eye button, not sectors
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace dropdown selector with a visual navigator featuring:
- Left/right arrow buttons for month navigation
- Clickable month buttons with mini donut chart previews
- Russian month labels (e.g., "Январь'25")
- Responsive layout for mobile screens
- Arrows disable at navigation boundaries
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
