фикс

src/views/ProfileView.vue

@@ -188,10 +188,10 @@
                       </button>
                       <div class="dropdown" v-if="showGenderList && filteredGenders.length > 0">
                         <div 
-                          v-for="option in filteredGenders" 
+                          v-for="option in filteredGenders"
-                          :key="option.value" 
+                          :key="option.value"
-                          class="dropdown-option"
                           @click="selectGender(option)"
+                          class="dropdown-option"
                         >
                           {{ option.text }}
                         </div>
@@ -1125,11 +1125,11 @@ onUnmounted(() => {
 .app-profile-view {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
   position: relative;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  overflow: hidden;
+  /* Убираем overflow: hidden чтобы контент не обрезался */
 }
 
 /* Container */
@@ -1141,7 +1141,7 @@ onUnmounted(() => {
   box-sizing: border-box;
 }
 
-/* Header Section */
+/* Header Section - ИСПРАВЛЕНО */
 .profile-header {
   background: rgba(33, 33, 60, 0.9);
   backdrop-filter: blur(10px);
@@ -1149,11 +1149,14 @@ onUnmounted(() => {
   color: white;
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 100;
-  height: var(--header-height, 56px);
+  /* Фиксируем минимальную высоту заголовка */
+  min-height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Убираем фиксированную высоту которая обрезала контент */
+  flex-shrink: 0;
 }
 
 .header-content {
@@ -1162,11 +1165,14 @@ onUnmounted(() => {
   align-items: center;
   width: 100%;
   position: relative;
+  min-height: 48px;
 }
 
 .profile-title {
   flex: 1;
   text-align: center;
+  /* Добавляем отступы чтобы заголовок не перекрывался кнопкой */
+  padding: 0 60px;
 }
 
 .section-title {
@@ -1175,10 +1181,13 @@ onUnmounted(() => {
   font-weight: 600;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   color: white;
+  /* Обеспечиваем видимость заголовка */
+  position: relative;
+  z-index: 1;
 }
 
 .subtitle {
-  margin: 0;
+  margin: 0.25rem 0 0;
   font-size: 0.85rem;
   opacity: 0.9;
   color: rgba(255, 255, 255, 0.8);
@@ -1189,24 +1198,30 @@ onUnmounted(() => {
   right: 0;
   top: 50%;
   transform: translateY(-50%);
+  /* Уменьшаем z-index чтобы не перекрывать заголовок */
+  z-index: 2;
 }
 
-/* Main Content */
+/* Main Content - ИСПРАВЛЕНО */
 .profile-content {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem 0;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
-  padding-bottom: calc(1rem + var(--nav-height, 60px));
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
   -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
 }
 
 .profile-layout {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
 }
 
-/* Profile Card */
+/* Profile Card - ИСПРАВЛЕНО */
 .profile-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
@@ -1214,6 +1229,9 @@ onUnmounted(() => {
   padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
 }
 
 .avatar-section {
@@ -1221,6 +1239,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
+  flex-wrap: wrap;
 }
 
 .avatar-container {
@@ -1297,18 +1316,16 @@ onUnmounted(() => {
   font-weight: 600;
   margin: 0 0 0.3rem;
   color: #333;
-  white-space: nowrap;
+  word-wrap: break-word;
-  overflow: hidden;
+  overflow-wrap: break-word;
-  text-overflow: ellipsis;
 }
 
 .user-email {
   font-size: 0.9rem;
   color: #6c757d;
   margin: 0 0 0.8rem;
-  white-space: nowrap;
+  word-wrap: break-word;
-  overflow: hidden;
+  overflow-wrap: break-word;
-  text-overflow: ellipsis;
 }
 
 .user-badges {
@@ -1402,7 +1419,7 @@ onUnmounted(() => {
   margin-top: 0.2rem;
 }
 
-/* Info Cards */
+/* Info Cards - ИСПРАВЛЕНО */
 .info-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
@@ -1410,6 +1427,10 @@ onUnmounted(() => {
   padding: 1.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+  margin-bottom: 1rem;
 }
 
 .card-header {
@@ -1470,6 +1491,8 @@ onUnmounted(() => {
   background: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .bio-text {
@@ -1484,6 +1507,8 @@ onUnmounted(() => {
   font-size: 1rem;
   transition: all 0.3s ease;
   background: white;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .form-input:focus {
@@ -1519,6 +1544,7 @@ onUnmounted(() => {
   padding: 0.25rem;
   border-radius: 4px;
   transition: all 0.3s ease;
+  z-index: 5;
 }
 
 .clear-btn:hover {
@@ -1571,6 +1597,7 @@ onUnmounted(() => {
   transition: all 0.3s ease;
   text-decoration: none;
   white-space: nowrap;
+  box-sizing: border-box;
 }
 
 .action-btn.primary {
@@ -1679,6 +1706,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.2rem;
+  z-index: 2;
 }
 
 .photo-actions {
@@ -1690,6 +1718,7 @@ onUnmounted(() => {
   gap: 0.5rem;
   opacity: 0;
   transition: opacity 0.3s ease;
+  z-index: 3;
 }
 
 .photo-item:hover .photo-actions {
@@ -1734,6 +1763,7 @@ onUnmounted(() => {
   align-items: center;
   flex: 1;
   padding: 2rem 1rem;
+  min-height: 50vh;
 }
 
 .no-data-card,
@@ -1820,7 +1850,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 2000;
   padding: 1rem;
 }
 
@@ -1951,6 +1981,10 @@ onUnmounted(() => {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 0.75rem;
   }
+
+  .profile-title {
+    padding: 0 80px;
+  }
 }
 
 /* Mobile Phones */
@@ -1961,17 +1995,24 @@ onUnmounted(() => {
   
   .profile-header {
     padding: 0.75rem 0;
+    min-height: 70px;
   }
   
   .header-content {
     flex-direction: column;
     gap: 0.5rem;
+    align-items: center;
   }
   
   .header-actions {
     position: static;
     transform: none;
   }
+
+  .profile-title {
+    padding: 0;
+    width: 100%;
+  }
   
   .section-title {
     font-size: 1.2rem;
@@ -1983,6 +2024,7 @@ onUnmounted(() => {
   
   .profile-content {
     padding: 0.75rem 0;
+    padding-bottom: calc(0.75rem + var(--nav-height, 60px));
   }
   
   .profile-layout {
@@ -2231,7 +2273,7 @@ onUnmounted(() => {
 @media (max-height: 450px) and (orientation: landscape) {
   .profile-header {
     padding: 0.5rem 0;
-    height: 46px;
+    min-height: 60px;
   }
   
   .section-title {
@@ -2301,7 +2343,7 @@ onUnmounted(() => {
 /* iOS Safe Area Support */
 @supports (padding-bottom: env(safe-area-inset-bottom)) {
   .profile-content {
-    padding-bottom: calc(1rem + var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(1.5rem + var(--nav-height, 60px) + env(safe-area-inset-bottom, 0px));
   }
 }
 
@@ -2316,7 +2358,7 @@ onUnmounted(() => {
   .spinner,
   .spinner-small {
     animation: none;
-  }
+   }
 }
 
 /* High Contrast Mode Support */