фикс

src/views/admin/AdminReportDetail.vue

@@ -162,8 +162,8 @@
     </div>
     
     <!-- Модальное окно для рассмотрения жалобы -->
-    <div v-if="showResolveModal" class="modal-overlay" @click="showResolveModal = false">
-      <div class="modal" @click.stop>
+    <div v-if="showResolveModal" class="modal-overlay">
+      <div class="modal">
         <div class="modal-header">
           <h3>Рассмотрение жалобы</h3>
           <button @click="showResolveModal = false" class="modal-close">
@@ -942,96 +942,26 @@ h2 {
   box-sizing: border-box;
 }
 
-.user-card {
-  background: white;
-  border: 1px solid #e9ecef;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  transition: all 0.2s ease;
-  width: 100%;
-  box-sizing: border-box;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 120px;
-}
-
-.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;
-  flex-wrap: wrap;
-}
-
-.user-role {
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: #495057;
-  white-space: nowrap;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  flex: 1;
-}
-
-.user-name {
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 0.25rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  padding-right: 5px;
-}
-
-.user-email {
-  color: #666;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+/* На мобильных устройствах меняем сетку на вертикальную */
+@media (max-width: 767px) {
+  .users-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 0.75rem;
   }
   
   .arrow-divider {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #007bff;
-  font-size: 1.5rem;
-  position: relative;
-}
-
-.arrow-icon {
-  display: block;
+    transform: rotate(90deg);
+    margin: 0.5rem 0;
   }
   
   .vs-text {
-  display: none;
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: #495057;
-  text-transform: uppercase;
+    display: block;
   }
   
-.resolve-date {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #28a745;
-  font-weight: 500;
+  .arrow-icon {
+    display: none;
+  }
 }
 
 /* Адаптивные стили для разных экранов */