diff --git a/src/views/admin/AdminReportDetail.vue b/src/views/admin/AdminReportDetail.vue index 7e88a4d..2a48ef9 100644 --- a/src/views/admin/AdminReportDetail.vue +++ b/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 { - display: flex; - flex-direction: row; - gap: 1rem; + .report-content { + padding: 1.5rem; + width: 100%; + 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) { - .info-grid { - grid-template-columns: 1fr 1fr; - gap: 1.5rem; +/* Под шрифты и контент на разных разрешениях */ +@media (max-width: 576px) { + .user-name { + font-size: 0.95rem; + word-break: break-word; } - .users-grid { - grid-template-columns: 1fr auto 1fr; - gap: 1rem; + .user-email { + font-size: 0.8rem; + word-break: break-all; } - .action-buttons { - display: flex; - flex-direction: row; - 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 */ + .description, + .admin-notes { + font-size: 0.95rem; } - .header-controls { - margin-bottom: 0.75rem; + .form-group textarea { + font-size: 1rem; /* Увеличение размера для лучшего взаимодействия на мобильных */ } - .page-header { - margin-bottom: 1rem; + .modal-content { + 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; } \ No newline at end of file