фикс профиля

src/views/ProfileView.vue

@@ -27,6 +27,7 @@
           <!-- Profile Header Card -->
           <div class="profile-header-card">
             <div class="profile-header-content">
+              <!-- Avatar Section -->
               <div class="avatar-section">
                 <div class="avatar-container">
                   <img 
@@ -45,24 +46,30 @@
                   </div>
                 </div>
                 
-                <div class="user-meta">
+                <div class="user-info-container">
-                  <h2 class="user-name">{{ profileData.name || 'Не указано' }}</h2>
+                  <div class="user-main-info">
-                  <p class="user-email">{{ profileData.email }}</p>
+                    <h2 class="user-name">{{ profileData.name || 'Не указано' }}</h2>
-                  <div class="user-badges">
+                    <div class="user-badges">
-                    <span class="badge verified">Подтвержден</span>
+                      <span class="badge verified">
-                    <span class="badge member-since">С {{ formatShortDate(profileData.createdAt) }}</span>
+                        <i class="bi-check-circle-fill"></i>
+                        Подтвержден
+                      </span>
+                      <span class="badge member-since">С {{ formatShortDate(profileData.createdAt) }}</span>
+                    </div>
                   </div>
+                  <p class="user-email">{{ profileData.email }}</p>
                 </div>
 
                 <div class="header-actions">
                   <button 
-                    class="edit-btn" 
+                    class="edit-btn compact" 
                     @click="toggleEditMode"
                     :disabled="profileLoading"
+                    :title="isEditMode ? 'Сохранить изменения' : 'Редактировать профиль'"
                   >
                     <i v-if="!isEditMode" class="bi-pencil"></i>
                     <i v-else class="bi-check"></i>
-                    {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
+                    <span class="btn-text">{{ isEditMode ? 'Сохранить' : 'Изменить' }}</span>
                   </button>
                 </div>
               </div>
@@ -112,10 +119,6 @@
                 <span>Фотографии</span>
                 <span class="tab-badge" v-if="profileData.photos?.length">{{ profileData.photos.length }}</span>
               </button>
-              <button class="tab-btn" :class="{ 'active': activeTab === 'notifications' }" @click="activeTab = 'notifications'">
-                <i class="bi-bell"></i>
-                <span>Уведомления</span>
-              </button>
               <button class="tab-btn" :class="{ 'active': activeTab === 'preferences' }" @click="activeTab = 'preferences'">
                 <i class="bi-sliders"></i>
                 <span>Предпочтения</span>
@@ -389,19 +392,6 @@
               </div>
             </div>
 
-            <!-- Notifications Tab -->
-            <div v-show="activeTab === 'notifications'" class="tab-pane">
-              <div class="info-card notifications-card">
-                <div class="card-header">
-                  <h3><i class="bi-bell"></i> Уведомления</h3>
-                </div>
-                <div class="card-content">
-                  <p>Здесь вы можете управлять настройками уведомлений.</p>
-                  <!-- Добавьте здесь содержимое для управления уведомлениями -->
-                </div>
-              </div>
-            </div>
-
             <!-- Preferences Tab -->
             <div v-show="activeTab === 'preferences'" class="tab-pane">
               <div class="info-card preferences-card">
@@ -1409,20 +1399,18 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
-/* Avatar Section */
+/* Avatar Section - Компактная компоновка */
 .avatar-section {
   display: flex;
-  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1rem;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .avatar-container {
   position: relative;
-  width: 80px;
+  width: 70px;
-  height: 80px;
+  height: 70px;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid rgba(102, 126, 234, 0.3);
@@ -1486,45 +1474,58 @@ onUnmounted(() => {
   transform: scale(1.1);
 }
 
-.user-meta {
+.user-info-container {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
+  gap: 0.3rem;
+}
+
+.user-main-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
 }
 
 .user-name {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   font-weight: 600;
-  margin: 0 0 0.2rem;
+  margin: 0;
   color: #333;
-  word-wrap: break-word;
+  line-height: 1.2;
-  overflow-wrap: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .user-email {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: #6c757d;
-  margin: 0 0 0.5rem;
+  margin: 0;
-  word-wrap: break-word;
+  line-height: 1.2;
-  overflow-wrap: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .user-badges {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
+  margin-top: 0.2rem;
 }
 
 .badge {
-  padding: 0.25rem 0.6rem;
+  padding: 0.2rem 0.5rem;
-  border-radius: 12px;
+  border-radius: 10px;
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   font-weight: 500;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 0.2rem;
+  flex-shrink: 0;
 }
 
 .badge.verified {
@@ -1539,8 +1540,8 @@ onUnmounted(() => {
 
 .header-actions {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  justify-content: flex-end;
+  flex-shrink: 0;
 }
 
 /* Edit Button */
@@ -1572,7 +1573,48 @@ onUnmounted(() => {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
-  box-shadow: none;
+}
+
+/* Компактная кнопка редактирования */
+.edit-btn.compact {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  color: white;
+  padding: 0.3rem 0.6rem;
+  border-radius: 15px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+  min-width: fit-content;
+  white-space: nowrap;
+}
+
+.edit-btn.compact:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  border-color: rgba(102, 126, 234, 0.5);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
+}
+
+.edit-btn.compact:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+}
+
+.edit-btn.compact i {
+  font-size: 0.7rem;
+}
+
+.edit-btn.compact .btn-text {
+  font-size: 0.75rem;
 }
 
 /* Stats Section */
@@ -2229,7 +2271,7 @@ onUnmounted(() => {
 
 .upload-zone:hover {
   border-color: #667eea;
-   background: rgba(102, 126, 234, 0.05);
+     background: rgba(102, 126, 234, 0.05);
   transform: translateY(-2px);
 }