From cd1d0f2a6971e47cacb1627364a3541eda4cc125 Mon Sep 17 00:00:00 2001
From: igor_nadein <nadein-igor-vladimirovich@05-04-1999.ru>
Date: Wed, 25 Feb 2026 02:06:00 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D1=83=D0=BD=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D1=81=D0=B5=D1=85=20=D0=BC=D0=BE=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D0=BE=D0=BA=D0=BE=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Проведен аудит всех 6 модальных окон календаря и унифицированы стили.

Проблемы до рефакторинга:
- CalendarModal: z-[200] вместо z-[100], нет backdrop-blur-sm, нет max-h/overflow
- CalendarParticipantsModal: нет backdrop-blur-sm, нет max-h/overflow
- Другие модалы: лишние transition классы

Стандартный стиль для ВСЕХ модалов:

Overlay:
  fixed inset-0 z-[100] flex items-center justify-center
  bg-black/50 backdrop-blur-sm p-4

Контейнер:
  w-full max-w-[md/2xl] rounded-2xl bg-white p-6
  shadow-xl max-h-[90vh] overflow-y-auto

Унифицированные модалы:
✅ EventModal
✅ ViewEventDetailsModal
✅ ViewDayEventsModal
✅ CalendarModal
✅ CalendarParticipantsModal
✅ CalendarSubscriptionsModal

Результат:
- Единообразный внешний вид всех модалов
- Правильная иерархия z-index (все z-[100])
- Размытие фона везде одинаковое
- Прокрутка контента при переполнении
- Простой и понятный код без излишеств
---
 frontend/src/components/CalendarModal.tsx              | 4 ++--
 frontend/src/components/CalendarParticipantsModal.tsx  | 4 ++--
 frontend/src/components/CalendarSubscriptionsModal.tsx | 4 ++--
 frontend/src/components/EventModal.tsx                 | 4 ++--
 frontend/src/components/ViewDayEventsModal.tsx         | 4 ++--
 frontend/src/components/ViewEventDetailsModal.tsx      | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/CalendarModal.tsx b/frontend/src/components/CalendarModal.tsx
index 7d6817be..a304e7fb 100644
--- a/frontend/src/components/CalendarModal.tsx
+++ b/frontend/src/components/CalendarModal.tsx
@@ -85,8 +85,8 @@ export function CalendarModal({ isOpen, onClose, calendar }: CalendarModalProps)
   };
 
   return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4">
-      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
         <div className="mb-4 flex items-center justify-between">
           <h3 className="text-lg font-semibold text-gray-900">
             {calendar?.id ? "Редактировать календарь" : "Создать календарь"}
diff --git a/frontend/src/components/CalendarParticipantsModal.tsx b/frontend/src/components/CalendarParticipantsModal.tsx
index bdb4ac12..dc3bdbd6 100644
--- a/frontend/src/components/CalendarParticipantsModal.tsx
+++ b/frontend/src/components/CalendarParticipantsModal.tsx
@@ -183,11 +183,11 @@ export default function CalendarParticipantsModal({
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
       onClick={onClose}
     >
       <div
-        className="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl"
+        className="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl max-h-[90vh] overflow-y-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between border-b px-6 py-4">
diff --git a/frontend/src/components/CalendarSubscriptionsModal.tsx b/frontend/src/components/CalendarSubscriptionsModal.tsx
index 62d80366..a8472a98 100644
--- a/frontend/src/components/CalendarSubscriptionsModal.tsx
+++ b/frontend/src/components/CalendarSubscriptionsModal.tsx
@@ -138,8 +138,8 @@ export function CalendarSubscriptionsModal({ isOpen, onClose, onUpdate }: Props)
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
-      <div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl transition-all duration-300 ease-out">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl max-h-[90vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
           <h3 className="text-lg font-semibold text-gray-900">Подписки на календари</h3>
diff --git a/frontend/src/components/EventModal.tsx b/frontend/src/components/EventModal.tsx
index 51a02e95..9d11827c 100644
--- a/frontend/src/components/EventModal.tsx
+++ b/frontend/src/components/EventModal.tsx
@@ -331,8 +331,8 @@ export function EventModal({
   if (!isOpen || !editingEvent) return null;
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
-      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
         <div className="mb-4 flex items-center justify-between">
           <h3 className="text-lg font-semibold text-gray-900">
             {editingEvent.id ? "Редактировать событие" : "Создать событие"}
diff --git a/frontend/src/components/ViewDayEventsModal.tsx b/frontend/src/components/ViewDayEventsModal.tsx
index 189e5132..f261d85b 100644
--- a/frontend/src/components/ViewDayEventsModal.tsx
+++ b/frontend/src/components/ViewDayEventsModal.tsx
@@ -42,8 +42,8 @@ export function ViewDayEventsModal({
   };
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
-      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
         <div className="mb-4 flex items-center justify-between">
           <div>
             <h3 className="text-lg font-semibold text-gray-900">События на {capitalizedDate}</h3>
diff --git a/frontend/src/components/ViewEventDetailsModal.tsx b/frontend/src/components/ViewEventDetailsModal.tsx
index aeb004f9..9055a2be 100644
--- a/frontend/src/components/ViewEventDetailsModal.tsx
+++ b/frontend/src/components/ViewEventDetailsModal.tsx
@@ -65,8 +65,8 @@ export function ViewEventDetailsModal({
   const capitalizedEnd = formatDateTime(event.end).charAt(0).toUpperCase() + formatDateTime(event.end).slice(1);
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
-      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
         <div className="mb-4 flex items-start justify-between">
           <div className="flex-1 min-w-0 pr-3">
             <div className="flex items-center gap-2 mb-1">