Правка фронта

1. Улучшения мобильной версии
2. Улучшения комментариев фронта
3. Единый лоадер UI

front_vue/src/views/LoginPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login-page">
+  <div class="login-page" :class="{ 'is-mobile': isMobile }">
     <!-- Левитирующие иконки на фоне -->
     <div class="floating-icons">
       <div class="float-icon icon-1"><i data-lucide="check-square"></i></div>
@@ -117,6 +117,9 @@ import { ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { authApi, cardsApi } from '../api'
 import { useProjectsStore } from '../stores/projects'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
 
 const router = useRouter()
 const store = useProjectsStore()
@@ -681,29 +684,27 @@ watch(showSuccess, () => {
   100% { transform: translateX(0); }
 }
 
-/* Мобильная адаптация (MOBILE_BREAKPOINT: 768px) */
-@media (max-width: 768px) {
-  .login-title {
-    font-size: 26px;
-  }
-  
-  .login-subtitle {
-    font-size: 14px;
-  }
-  
-  .logo-icon {
-    width: 64px;
-    height: 64px;
-  }
-  
-  .logo-icon i,
-  .logo-icon svg {
-    width: 32px;
-    height: 32px;
-  }
-  
-  .float-icon {
-    opacity: 0.5;
-  }
+/* Мобильная адаптация (MOBILE_BREAKPOINT из config.js) */
+.login-page.is-mobile .login-title {
+  font-size: 26px;
+}
+
+.login-page.is-mobile .login-subtitle {
+  font-size: 14px;
+}
+
+.login-page.is-mobile .logo-icon {
+  width: 64px;
+  height: 64px;
+}
+
+.login-page.is-mobile .logo-icon i,
+.login-page.is-mobile .logo-icon svg {
+  width: 32px;
+  height: 32px;
+}
+
+.login-page.is-mobile .float-icon {
+  opacity: 0.5;
 }
 </style>