diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index bdd9e3f..f267c79 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -188,10 +188,10 @@
{{ option.text }}
@@ -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;
- height: var(--header-height, 56px);
+ z-index: 100;
+ /* Фиксируем минимальную высоту заголовка */
+ 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;
- overflow: hidden;
- text-overflow: ellipsis;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
}
.user-email {
font-size: 0.9rem;
color: #6c757d;
margin: 0 0 0.8rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
}
.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 */