фикс

src/views/admin/AdminReportDetail.vue

@@ -401,14 +401,12 @@ export default {
 
 <style scoped>
 .admin-report-detail {
-  /* Base padding, applied if no media query overrides a specific side */
+  /* Base padding с поддержкой safe-area для устройств с вырезом */
-  padding-top: 1.5rem;
+  padding: 1.5rem 1rem calc(60px + env(safe-area-inset-bottom, 0px)) 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 2rem; /* Default bottom padding */
   max-width: 100%;
-  overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
+  overflow-x: hidden;
-  box-sizing: border-box; /* Гарантия, что padding учитывается в ширине */
+  box-sizing: border-box;
+  min-height: calc(100vh - 80px);
 }
 
 .header-controls {
@@ -428,6 +426,7 @@ export default {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  min-height: 40px;
 }
 
 .back-btn:hover {
@@ -435,6 +434,10 @@ export default {
   transform: translateY(-1px);
 }
 
+.back-btn .btn-text {
+  display: inline;
+}
+
 .loading-indicator {
   text-align: center;
   padding: 2rem;
@@ -474,6 +477,7 @@ h2 {
   margin-bottom: 1.5rem;
   color: #333;
   font-weight: 600;
+  font-size: 1.75rem;
 }
 
 .page-header {
@@ -481,6 +485,8 @@ h2 {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .status-display {
@@ -491,7 +497,7 @@ h2 {
 
 .report-container {
   width: 100%;
-  overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
+  overflow-x: hidden;
 }
 
 .report-card {
@@ -500,7 +506,7 @@ h2 {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   width: 100%;
-  box-sizing: border-box; /* Гарантия, что padding учитывается в ширине */
+  box-sizing: border-box;
 }
 
 .report-header {
@@ -509,19 +515,28 @@ h2 {
   border-bottom: 1px solid #dee2e6;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .report-info {
   display: flex;
   align-items: center;
   gap: 1rem;
+  flex: 1;
+  min-width: 0;
 }
 
 .report-id-section {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
+}
+
+.id-info {
+  min-width: 0;
 }
 
 .report-info h3 {
@@ -533,9 +548,9 @@ h2 {
 .full-id {
   color: #6c757d;
   font-size: 0.9rem;
-  word-break: break-all; /* Разрешить перенос длинных строк везде */
+  word-break: break-all;
-  max-width: 100%; /* Ограничение ширины */
+  max-width: 100%;
-  display: inline-block; /* Для корректного применения max-width */
+  display: block;
 }
 
 .report-date {
@@ -544,18 +559,19 @@ h2 {
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  white-space: nowrap;
 }
 
 .report-content {
   padding: 1.5rem;
   width: 100%;
-  box-sizing: border-box; /* Учитывать padding в общей ширине */
+  box-sizing: border-box;
 }
 
 .info-grid {
   display: grid;
   gap: 1.5rem;
-  width: 100%; /* Обеспечение заполнения всей доступной ширины */
+  width: 100%;
 }
 
 .info-section {
@@ -564,9 +580,9 @@ h2 {
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
   width: 100%;
-  box-sizing: border-box; /* Учитывать padding в общей ширине */
+  box-sizing: border-box;
-  overflow-wrap: break-word; /* Гарантия переноса длинных слов */
+  overflow-wrap: break-word;
-  word-wrap: break-word; /* Для поддержки старых браузеров */
+  word-wrap: break-word;
 }
 
 .section-header {
@@ -580,6 +596,15 @@ h2 {
   margin: 0;
   color: #495057;
   font-weight: 500;
+  font-size: 1.1rem;
+}
+
+.info-item {
+  margin-bottom: 1rem;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
 }
 
 .info-item label {
@@ -597,10 +622,10 @@ h2 {
   border: 1px solid #e9ecef;
   margin: 0;
   line-height: 1.6;
-  overflow-wrap: break-word; /* Гарантия переноса длинных слов */
+  overflow-wrap: break-word;
-  word-wrap: break-word; /* Для поддержки старых браузеров */
+  word-wrap: break-word;
-  white-space: pre-line; /* Сохранение переносов строк в тексте */
+  white-space: pre-line;
-  max-width: 100%; /* Ограничение ширины */
+  max-width: 100%;
 }
 
 .user-info {
@@ -629,6 +654,7 @@ h2 {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  min-height: 32px;
 }
 
 .view-user-btn:hover {
@@ -673,6 +699,7 @@ h2 {
 .action-buttons {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 
 .btn {
@@ -686,6 +713,8 @@ h2 {
   font-weight: 500;
   transition: all 0.2s ease;
   text-decoration: none;
+  min-height: 40px;
+  font-size: 0.9rem;
 }
 
 .resolve-btn {
@@ -715,6 +744,7 @@ h2 {
 
 .cancel-btn:hover {
   background: #545b62;
+  transform: translateY(-1px);
 }
 
 .btn:disabled {
@@ -735,6 +765,7 @@ h2 {
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  padding: 1rem;
 }
 
 .modal {
@@ -742,9 +773,10 @@ h2 {
   border-radius: 0.75rem;
   padding: 1.5rem;
   max-width: 500px;
-  width: 90%;
+  width: 100%;
   max-height: 90vh;
   overflow-y: auto;
+  box-sizing: border-box;
 }
 
 .modal-header {
@@ -757,6 +789,7 @@ h2 {
 .modal-header h3 {
   margin: 0;
   color: #333;
+  font-size: 1.2rem;
 }
 
 .modal-close {
@@ -765,10 +798,18 @@ h2 {
   cursor: pointer;
   font-size: 1.25rem;
   color: #6c757d;
+  padding: 0.25rem;
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .modal-close:hover {
   color: #333;
+  background: #f8f9fa;
+  border-radius: 0.25rem;
 }
 
 .form-group {
@@ -790,6 +831,7 @@ h2 {
   border-radius: 0.375rem;
   font-family: inherit;
   resize: vertical;
+  box-sizing: border-box;
 }
 
 .modal-actions {
@@ -797,6 +839,7 @@ h2 {
   gap: 1rem;
   justify-content: flex-end;
   margin-top: 1.5rem;
+  flex-wrap: wrap;
 }
 
 /* Пользовательские карточки в секции участников */
@@ -817,9 +860,10 @@ h2 {
   transition: all 0.2s ease;
   width: 100%;
   box-sizing: border-box;
-  height: 100%; /* Одинаковая высота карточек */
+  height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 120px;
 }
 
 .user-card:hover {
@@ -832,14 +876,14 @@ h2 {
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
-  flex-wrap: wrap; /* Разрешить перенос на новую строку */
+  flex-wrap: wrap;
 }
 
 .user-role {
   font-weight: 600;
   font-size: 0.85rem;
   color: #495057;
-  white-space: nowrap; /* Предотвращение разрыва метки роли */
+  white-space: nowrap;
 }
 
 .user-details {
@@ -848,7 +892,7 @@ h2 {
   gap: 0.25rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  flex: 1; /* Растяжение для выравнивания высоты */
+  flex: 1;
 }
 
 .user-name {
@@ -885,21 +929,94 @@ h2 {
 }
 
 .vs-text {
-  display: none; /* По умолчанию скрыт, показывается на мобильных */
+  display: none;
   font-weight: 600;
   font-size: 0.9rem;
   color: #495057;
   text-transform: uppercase;
 }
 
-/* Специальные стили для очень маленьких экранов */
+.resolve-date {
-@media (max-width: 360px) {
+  display: flex;
-  .users-grid {
+  align-items: center;
   gap: 0.5rem;
+  color: #28a745;
+  font-weight: 500;
+}
+
+/* Адаптивные стили для разных экранов */
+
+/* Очень маленькие экраны (до 360px) */
+@media (max-width: 360px) {
+  .admin-report-detail {
+    padding: 1rem 0.5rem calc(60px + env(safe-area-inset-bottom, 0px)) 0.5rem;
+  }
+  
+  h2 {
+    font-size: 1.3rem;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .report-header {
+    padding: 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .report-content,
+  .info-section,
+  .report-actions {
+    padding: 1rem;
+  }
+  
+  .back-btn .btn-text {
+    display: none;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    position: relative;
+    padding: 0.5rem 0;
+  }
+  
+  .arrow-divider {
+    position: absolute;
+    top: calc(50% - 1rem);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border: 1px solid #e9ecef;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    z-index: 2;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .arrow-icon {
+    display: none;
+  }
+  
+  .vs-text {
+    display: block;
+    font-size: 0.75rem;
+    line-height: 1;
   }
   
   .user-card {
     padding: 0.75rem;
+    min-height: 100px;
   }
   
   .user-header {
@@ -926,27 +1043,59 @@ h2 {
   .view-user-btn span {
     display: none;
   }
+  
+  .reporter {
+    margin-bottom: 1.5rem;
+  }
+  
+  .reported {
+    margin-top: 1rem;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .btn {
+    width: 100%;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+  }
+  
+  .modal-actions {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .modal-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Маленькие экраны (361px - 480px) */
+@media (min-width: 361px) and (max-width: 480px) {
+  .admin-report-detail {
+    padding: 1rem 0.75rem calc(60px + env(safe-area-inset-bottom, 0px)) 0.75rem;
   }
   
-/* Улучшенная мобильная адаптация */
-@media (max-width: 480px) {
   .users-grid {
     grid-template-columns: 1fr;
     gap: 1rem;
     position: relative;
-    padding-bottom: 0.5rem;
+    padding: 0.75rem 0;
-    padding-top: 1rem;
   }
   
   .arrow-divider {
     position: absolute;
-    top: calc(50% - 0.75rem); /* Смещение вверх для точного центрирования */
+    top: calc(50% - 0.75rem);
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: white;
     border: 1px solid #e9ecef;
     border-radius: 50%;
-    width: 2.2rem; /* Увеличил размер для лучшей видимости */
+    width: 2.2rem;
     height: 2.2rem;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     z-index: 2;
@@ -956,25 +1105,41 @@ h2 {
     justify-content: center;
   }
   
+  .arrow-icon {
+    display: none;
+  }
+  
   .vs-text {
-    display: block; /* Показать текст VS на мобильных */
+    display: block;
     font-size: 0.85rem;
     line-height: 1;
-    margin: 0;
-    padding: 0;
   }
   
   .reporter {
-    margin-bottom: 2rem; /* Увеличенное пространство для разделителя */
+    margin-bottom: 2rem;
   }
   
   .reported {
-    margin-top: 1rem; /* Увеличенное пространство после разделителя */
+    margin-top: 1rem;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .btn {
+    width: 100%;
+    justify-content: center;
   }
 }
 
-/* Маленькие экраны (481px - 767px) */
+/* Средние экраны (481px - 767px) */
 @media (min-width: 481px) and (max-width: 767px) {
+  .admin-report-detail {
+    padding: 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem;
+  }
+  
   .users-grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
@@ -1009,5 +1174,155 @@ h2 {
     align-self: flex-start;
     margin-top: 0.75rem;
   }
+  
+  .action-buttons {
+    justify-content: center;
+  }
+}
+
+/* Большие экраны (768px - 991px) */
+@media (min-width: 768px) and (max-width: 991px) {
+  .admin-report-detail {
+    padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1.25rem;
+  }
+  
+  .arrow-icon {
+    display: block;
+  }
+  
+  .vs-text {
+    display: none;
+  }
+}
+
+/* Очень большие экраны (992px - 1199px) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .admin-report-detail {
+    padding: 2rem 1.5rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.5rem;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1.5rem;
+  }
+}
+
+/* Десктопные экраны (1200px+) */
+@media (min-width: 1200px) {
+  .admin-report-detail {
+    padding: 2rem calc(60px + env(safe-area-inset-bottom, 0px)) 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr auto 1fr;
+    gap: 2rem;
+  }
+  
+  .user-card {
+    min-height: 140px;
+  }
+}
+
+/* Планшеты в ландшафтной ориентации */
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+  .admin-report-detail {
+    padding: 1.5rem 1.25rem calc(60px + env(safe-area-inset-bottom, 0px)) 1.25rem;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1.25rem;
+  }
+  
+  .page-header {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+/* Ландшафтная ориентация на мобильных */
+@media (max-height: 450px) and (orientation: landscape) {
+  .admin-report-detail {
+    padding: 1rem calc(50px + env(safe-area-inset-bottom, 0px)) 1rem;
+  }
+  
+  .header-controls {
+    margin-bottom: 1rem;
+  }
+  
+  .page-header {
+    margin-bottom: 1rem;
+  }
+  
+  .report-content,
+  .info-section,
+  .report-actions {
+    padding: 1rem;
+  }
+  
+  .info-grid {
+    gap: 1rem;
+  }
+  
+  .modal {
+    max-height: 85vh;
+  }
+}
+
+/* Высокие экраны */
+@media (min-height: 800px) {
+  .admin-report-detail {
+    min-height: calc(100vh - 120px);
+  }
+}
+
+/* Устройства с вырезом (notch) */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .admin-report-detail {
+    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Ретина экраны с высокой плотностью пикселей */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .loading-spinner {
+    border-width: 2px;
+  }
+  
+  .user-card {
+    border-width: 0.5px;
+  }
+}
+
+/* Темная тема (если поддерживается) */
+@media (prefers-color-scheme: dark) {
+  /* Оставляем светлую тему для админ панели */
+}
+
+/* Уменьшенная анимация для пользователей с проблемами вестибулярного аппарата */
+@media (prefers-reduced-motion: reduce) {
+  .loading-spinner {
+    animation: none;
+  }
+  
+  .btn,
+  .back-btn,
+  .view-user-btn,
+  .user-card {
+    transition: none;
+  }
+  
+  .btn:hover,
+  .back-btn:hover,
+  .view-user-btn:hover {
+    transform: none;
+  }
 }
 </style>