фикс списка пола

src/views/ProfileView.vue

@@ -150,18 +150,37 @@
                   <div class="info-item">
                     <label for="editGender">Пол</label>
                     <span v-if="!isEditMode">{{ getGenderText(profileData.gender) }}</span>
-                    <select 
+                    <div v-else class="city-input-wrapper">
-                      v-else
+                      <input 
-                      class="form-input form-select" 
+                        type="text" 
-                      id="editGender" 
+                        class="form-input" 
-                      v-model="editableProfileData.gender" 
+                        id="editGender" 
-                      :disabled="profileLoading"
+                        v-model="genderSearchQuery" 
-                    >
+                        placeholder="Выберите пол..." 
-                      <option value="">Не выбрано</option>
+                        @focus="showGenderList = true; filteredGenders = genderOptions"
-                      <option value="male">Мужской</option>
+                        @input="onGenderSearch"
-                      <option value="female">Женский</option>
+                        :disabled="profileLoading" 
-                      <option value="other">Другой</option>
+                      />
-                    </select>
+                      <button 
+                        type="button"
+                        class="city-clear-btn" 
+                        @click="clearGenderSelection" 
+                        v-if="editableProfileData.gender"
+                        :disabled="profileLoading"
+                      >
+                        <i class="bi-x"></i>
+                      </button>
+                      <div class="city-dropdown" v-if="showGenderList && filteredGenders.length > 0">
+                        <div 
+                          v-for="option in filteredGenders" 
+                          :key="option.value" 
+                          class="city-option"
+                          @click="selectGender(option)"
+                        >
+                          {{ option.text }}
+                        </div>
+                      </div>
+                    </div>
                   </div>
                   <div class="info-item">
                     <label for="editCity">Город</label>
@@ -375,6 +394,16 @@ const showCityList = ref(false);
 const filteredCities = ref([]);
 let cities = []; // для хранения списка городов
 
+// Для выпадающего списка пола
+const genderOptions = ref([
+  { value: 'male', text: 'Мужской' },
+  { value: 'female', text: 'Женский' },
+  { value: 'other', text: 'Другой' }
+]);
+const genderSearchQuery = ref('');
+const showGenderList = ref(false);
+const filteredGenders = ref([]);
+
 // Computed properties
 const mainPhoto = computed(() => {
   return profileData.value?.photos?.find(photo => photo.isProfilePhoto) || 
@@ -866,6 +895,24 @@ const clearCitySelection = () => {
   }
 };
 
+// Методы для выбора пола
+const onGenderSearch = () => {
+  filteredGenders.value = genderOptions.value.filter(option => 
+    option.text.toLowerCase().includes(genderSearchQuery.value.toLowerCase())
+  );
+};
+
+const selectGender = (genderOption) => {
+  genderSearchQuery.value = genderOption.text;
+  editableProfileData.value.gender = genderOption.value;
+  showGenderList.value = false;
+};
+
+const clearGenderSelection = () => {
+  genderSearchQuery.value = '';
+  editableProfileData.value.gender = '';
+};
+
 const clearProfileMessages = () => {
   profileActionError.value = '';
   profileActionSuccess.value = '';
@@ -1352,14 +1399,6 @@ onMounted(async () => {
   line-height: 1.5;
 }
 
-.form-select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  background-size: 16px 12px;
-}
-
 /* Стили для выпадающего списка городов */
 .city-input-wrapper {
   position: relative;
@@ -1544,113 +1583,6 @@ onMounted(async () => {
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
 }
 
-/* Медиа-запросы для адаптивности */
-@media (max-width: 1024px) {
-  .profile-layout {
-    grid-template-columns: 300px 1fr;
-    gap: 1.5rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .profile-layout {
-    grid-template-columns: 1fr;
-  }
-  
-  .profile-card {
-    position: static;
-  }
-  
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .card-content {
-    padding: 1.5rem;
-  }
-  
-  .card-header {
-    padding: 1.2rem 1.5rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .header-content {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .avatar-section {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .photo-grid {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  }
-  .main-content {
-    padding: 1rem 0 2rem;
-  }
-}
-
-/* Стили кнопок действий */
-.action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 50px;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
-}
-
-.action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-}
-
-.action-btn.danger {
-  background: linear-gradient(45deg, #f5365c, #f56036);
-  color: white;
-}
-
-.action-btn.small {
-  padding: 0.3rem 0.6rem;
-  font-size: 0.8rem;
-}
-
-.action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-}
-
-.action-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.add-photo-btn {
-  padding: 0.5rem 1rem;
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  font-weight: 600;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
-}
-
-.add-photo-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-}
-
 /* Стили для предупреждений и сообщений */
 .alert {
   padding: 1rem;