feat(frontend): адаптация под мобильные устройства

- Мобильная навигация: hamburger-меню и drawer вместо фиксированного sidebar
- Модальные окна на весь экран при ширине < 480px
- Адаптивные заголовки страниц и фильтры (touch-friendly)
- Card view для таблицы операций при ширине < 600px
- Горизонтальный скролл вкладок настроек
- Увеличенные touch-targets (44px) для пагинации и кнопок
- Уменьшенная высота графиков на мобильных
- Поддержка safe-area-inset для устройств с вырезами
- theme-color в index.html

Made-with: Cursor

frontend/src/components/CategoryChart.tsx

@@ -7,6 +7,7 @@ import {
 } from 'recharts';
 import type { ByCategoryItem } from '@family-budget/shared';
 import { formatAmount } from '../utils/format';
+import { useMediaQuery } from '../hooks/useMediaQuery';
 
 interface Props {
   data: ByCategoryItem[];
@@ -25,6 +26,9 @@ const rubFormatter = new Intl.NumberFormat('ru-RU', {
 });
 
 export function CategoryChart({ data }: Props) {
+  const isMobile = useMediaQuery('(max-width: 600px)');
+  const chartHeight = isMobile ? 250 : 300;
+
   if (data.length === 0) {
     return <div className="chart-empty">Нет данных за период</div>;
   }
@@ -38,7 +42,7 @@ export function CategoryChart({ data }: Props) {
 
   return (
     <div className="category-chart-wrapper">
-      <ResponsiveContainer width="100%" height={300}>
+      <ResponsiveContainer width="100%" height={chartHeight}>
         <PieChart>
           <Pie
             data={chartData}