фикс

src/views/admin/AdminReportDetail.vue

@@ -405,6 +405,8 @@ export default {
   padding-right: 1rem;
   padding-bottom: 2rem; /* Default bottom padding */
   max-width: 100%;
+  overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
+  box-sizing: border-box; /* Гарантия, что padding учитывается в ширине */
 }
 
 .header-controls {
@@ -485,11 +487,18 @@ h2 {
   gap: 0.5rem;
 }
 
+.report-container {
+  width: 100%;
+  overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
+}
+
 .report-card {
   background: white;
   border-radius: 0.75rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  width: 100%;
+  box-sizing: border-box; /* Гарантия, что padding учитывается в ширине */
 }
 
 .report-header {
@@ -522,6 +531,9 @@ h2 {
 .full-id {
   color: #6c757d;
   font-size: 0.9rem;
+  word-break: break-all; /* Разрешить перенос длинных строк везде */
+  max-width: 100%; /* Ограничение ширины */
+  display: inline-block; /* Для корректного применения max-width */
 }
 
 .report-date {
@@ -534,11 +546,14 @@ h2 {
 
 .report-content {
   padding: 1.5rem;
+  width: 100%;
+  box-sizing: border-box; /* Учитывать padding в общей ширине */
 }
 
 .info-grid {
   display: grid;
   gap: 1.5rem;
+  width: 100%; /* Обеспечение заполнения всей доступной ширины */
 }
 
 .info-section {
@@ -546,6 +561,10 @@ h2 {
   padding: 1.5rem;
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
+  width: 100%;
+  box-sizing: border-box; /* Учитывать padding в общей ширине */
+  overflow-wrap: break-word; /* Гарантия переноса длинных слов */
+  word-wrap: break-word; /* Для поддержки старых браузеров */
 }
 
 .section-header {
@@ -576,6 +595,10 @@ h2 {
   border: 1px solid #e9ecef;
   margin: 0;
   line-height: 1.6;
+  overflow-wrap: break-word; /* Гарантия переноса длинных слов */
+  word-wrap: break-word; /* Для поддержки старых браузеров */
+  white-space: pre-line; /* Сохранение переносов строк в тексте */
+  max-width: 100%; /* Ограничение ширины */
 }
 
 .user-info {
@@ -842,6 +865,7 @@ h2 {
   .full-id {
     font-size: 0.8rem;
     word-break: break-all;
+    max-width: 100%;
   }
   
   .report-content {
@@ -849,7 +873,9 @@ h2 {
   }
   
   .info-section {
-    padding: 1rem;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
   }
   
   .users-grid {
@@ -896,8 +922,9 @@ h2 {
 /* Маленькие экраны (481px - 767px) */
 @media (min-width: 481px) and (max-width: 767px) {
   .admin-report-detail {
-    /* Corrected padding: top 1rem, sides 1rem, bottom 1.5rem */
     padding: 1rem 1rem 1.5rem 1rem;
+    width: 100%;
+    box-sizing: border-box;
   }
   
   .page-header {
@@ -946,8 +973,9 @@ h2 {
 /* Средние экраны (768px - 991px) */
 @media (min-width: 768px) and (max-width: 991px) {
   .admin-report-detail {
-    /* Corrected padding: top 1.5rem, sides 1rem, bottom 2rem */
     padding: 1.5rem 1rem 2rem 1rem;
+    max-width: 100%;
+    box-sizing: border-box;
   }
   
   .report-header {
@@ -967,24 +995,32 @@ h2 {
   .info-grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
+    max-width: 100%;
   }
   
-  .action-buttons {
+  .report-content {
-    display: flex;
+    padding: 1.5rem;
-    flex-direction: row;
+    width: 100%;
-    gap: 1rem;
+    box-sizing: border-box;
+  }
+  
+  .user-card {
+    max-width: 100%;
   }
 }
 
 /* Большие экраны (992px - 1199px) */
 @media (min-width: 992px) and (max-width: 1199px) {
   .admin-report-detail {
-    padding: 2rem 1.5rem; /* vertical 2rem, horizontal 1.5rem */
+    padding: 2rem 1.5rem;
+    width: 100%;
+    box-sizing: border-box;
   }
   
   .info-grid {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Автоматическое управление колонками */
     gap: 1.5rem;
+    max-width: 100%;
   }
   
   .info-section:last-child {
@@ -1000,14 +1036,17 @@ h2 {
 /* Очень большие экраны (1200px+) */
 @media (min-width: 1200px) {
   .admin-report-detail {
-    padding: 2rem; /* All sides 2rem */
+    padding: 2rem;
     max-width: 1200px;
     margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
   }
   
   .info-grid {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Автоматическое управление колонками */
     gap: 2rem;
+    max-width: 100%;
   }
   
   .info-section:last-child {
@@ -1032,186 +1071,30 @@ h2 {
   }
 }
 
-/* Планшеты в ландшафтной ориентации */
+/* Под шрифты и контент на разных разрешениях */
-@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+@media (max-width: 576px) {
-  .info-grid {
+  .user-name {
-    grid-template-columns: 1fr 1fr;
+    font-size: 0.95rem;
-    gap: 1.5rem;
+    word-break: break-word;
   }
   
-  .users-grid {
+  .user-email {
-    grid-template-columns: 1fr auto 1fr;
+    font-size: 0.8rem;
-    gap: 1rem;
+    word-break: break-all;
   }
   
-  .action-buttons {
+  .description,
-    display: flex;
+  .admin-notes {
-    flex-direction: row;
+    font-size: 0.95rem;
-    gap: 1rem;
-  }
-}
-
-/* Ландшафтная ориентация на мобильных */
-@media (max-height: 450px) and (orientation: landscape) {
-  .admin-report-detail {
-    /* Adjusted padding for landscape mobile */
-    padding: 0.75rem 0.75rem 1rem 0.75rem; /* top, right, bottom, left */
   }
   
-  .header-controls {
+  .form-group textarea {
-    margin-bottom: 0.75rem;
+    font-size: 1rem; /* Увеличение размера для лучшего взаимодействия на мобильных */
   }
   
-  .page-header {
+  .modal-content {
-    margin-bottom: 1rem;
+    max-width: 100%;
+    overflow-wrap: break-word;
   }
-  
-  .report-header {
-    padding: 1rem;
-  }
-  
-  .report-content {
-    padding: 1rem;
-  }
-  
-  .info-section {
-    padding: 1rem;
-  }
-  
-  .modal {
-    max-height: 85vh;
-  }
-}
-
-/* Высокие экраны */
-@media (min-height: 800px) {
-  .admin-report-detail {
-    min-height: calc(100vh - 200px);
-  }
-  
-  .report-card {
-    min-height: 400px;
-  }
-}
-
-/* Улучшения для сенсорных экранов */
-@media (hover: none) and (pointer: coarse) {
-  .btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-  
-  .back-btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-  
-  .view-user-btn {
-    min-height: 44px;
-  }
-  
-  .modal-close {
-    min-height: 44px;
-    min-width: 44px;
-  }
-}
-
-/* Принтеры */
-@media print {
-  .admin-report-detail {
-    padding: 1rem;
-  }
-  
-  .header-controls,
-  .report-actions,
-  .modal-overlay {
-    display: none;
-  }
-  
-  .report-card {
-    box-shadow: none;
-    border: 1px solid #000;
-  }
-  
-  .page-header {
-    border-bottom: 2px solid #000;
-    padding-bottom: 1rem;
-    margin-bottom: 1rem;
-  }
-}
-
-/* Пользовательские карточки */
-.users-grid {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 1rem;
-  align-items: center;
-}
-
-.user-card {
-  background: white;
-  border: 1px solid #e9ecef;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  transition: all 0.2s ease;
-}
-
-.user-card:hover {
-  border-color: #007bff;
-  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
-}
-
-.user-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.user-role {
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: #495057;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.user-name {
-  font-weight: 500;
-  color: #333;
-}
-
-.user-email {
-  color: #6c757d;
-  font-size: 0.85rem;
-}
-
-.arrow-divider {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #007bff;
-  font-size: 1.5rem;
-}
-
-.description-container,
-.admin-notes-container {
-  background: white;
-  border: 1px solid #e9ecef;
-  border-radius: 0.375rem;
-  padding: 1rem;
-  margin-top: 0.5rem;
-}
-
-.resolve-date {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #28a745;
-  font-weight: 500;
 }
 </style>