fix css

apps/frontend/src/components/create/CreateSection.vue

@@ -16,12 +16,14 @@ watch(
   () => sectionRef.value && props.isNextActiveSection,
   (isNextActiveSection) => {
     if (isNextActiveSection) {
+      sectionRef.value?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
       const input = sectionRef.value?.querySelector('input[type="text"]')
       if (input instanceof HTMLInputElement) {
-        input.focus()
+        setTimeout(() => {
+          input.focus()
+        }, 200)
       }
-
-      sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
     }
   },
   { immediate: true },

apps/frontend/src/components/manage/QRCodeCard.vue

@@ -12,7 +12,9 @@
       <!--        class="p-button-outlined p-button-sm"-->
       <!--      />-->
     </div>
-    <div class="text-gray-500">Создано: {{ formatedCreatedAt }}</div>
+    <div class="text-gray-500">
+      Создан: <span class="text-nowrap">{{ formatedCreatedAt }}</span>
+    </div>
   </RouterLink>
 </template>
 

apps/frontend/src/layouts/LayoutWithTabs.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
-    <div
-      class="flex flex-1 overflow-auto pb-safe-or-4 sm:pt-safe sm:max-w-prose mx-auto w-full px-4 touch-pan-y"
-    >
-      <slot />
+    <div class="flex overflow-auto pb-safe-or-4 sm:pt-safe w-full px-4 touch-pan-y">
+      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5">
+        <slot />
+      </div>
     </div>
 
     <slot name="footer">
@@ -29,11 +29,11 @@ const slots = defineSlots<{
   default?: () => void
   footer?: () => void
 }>()
-</script>
 
-<style>
-html,
-body {
-  overflow: hidden;
-}
-</style>
+const layoutPageHead = useHead({
+  htmlAttrs: { class: 'overflow-hidden' },
+  bodyAttrs: { class: 'overflow-hidden' },
+})
+
+onBeforeUnmount(() => layoutPageHead?.dispose())
+</script>

apps/frontend/src/router/index.ts

@@ -11,7 +11,7 @@ const routes = [
     name: ROUTE_NAMES.HOME,
     component: () =>
       isRunningStandalone()
-        ? import('@/views/ManageQRCodesView.vue')
+        ? import('@/views/manage/ManageQRCodesView.vue')
         : import('@/views/HomeView.vue'),
   },
   {
@@ -22,37 +22,37 @@ const routes = [
   {
     path: '/manage',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_QR_CODES,
-    component: () => import('@/views/ManageQRCodesView.vue'),
+    component: () => import('@/views/manage/ManageQRCodesView.vue'),
     props: true,
   },
   {
     path: '/manage/qr',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_QR,
-    component: () => import('@/views/ManageQRCodesView.vue'),
+    component: () => import('@/views/manage/ManageQRCodesView.vue'),
     props: true,
   },
   {
     path: '/manage/chats',
     name: ROUTE_NAMES.MANAGE_DASHBOARD_CHATS,
-    component: () => import('@/views/ManageChatsView.vue'),
+    component: () => import('@/views/manage/ManageChatsView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri',
     name: ROUTE_NAMES.MANAGE_QR_CODE,
-    component: () => import('@/views/ManageQRCodeView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri/ready',
     name: ROUTE_NAMES.MANAGE_QR_CODE_READY,
-    component: () => import('@/views/ManageQRCodeReadyView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeReadyView.vue'),
     props: true,
   },
   {
     path: '/manage/qr/:qr_code_uri/chat/:chat',
     name: ROUTE_NAMES.MANAGE_QR_CODE_CHAT,
-    component: () => import('@/views/ManageQRCodeChatView.vue'),
+    component: () => import('@/views/manage/ManageQRCodeChatView.vue'),
     props: true,
   },
   {

apps/frontend/src/views/CreateView.vue

@@ -69,6 +69,7 @@ const {
 } = useMutation({
   mutationKey: ['createQrCode'],
   mutationFn: async () => {
+    throw new Error('wtf')
     const qrCodeDocument = await createQrCodeDocument({
       name: name.value,
       placement: placement.value!,

apps/frontend/src/views/manage/ManageChatsView.vue

@@ -15,11 +15,8 @@
           class="flex flex-col gap-5 my-4 grid grid-cols-1 sm:grid-cols-3 gap-4"
         />
 
-        <div
-          v-else
-          class="flex-1 flex flex-col items-center place-self-center text-center text-gray-500"
-        >
-          <h1 class="text-2xl font-bold mb-4 text-center sm:text-left">Страница в разработке</h1>
+        <div v-else class="place-self-center">
+          <h1 class="text-2xl font-bold mb-4 text-gray-500">Страница в разработке</h1>
         </div>
       </template>
 

apps/frontend/src/views/manage/ManageQRCodeView.vue

@@ -9,7 +9,7 @@
             content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
           />
         </MetaHead>
-        <div class="bg-white p-6 rounded-lg shadow-md my-5">
+        <div class="">
           <div class="flex items-center justify-between mb-4">
             <div class="flex items-center">
               <QRCodePlacementIcon :placement="qrCodeDoc.placement" />

apps/frontend/src/views/manage/ManageQRCodesView.vue

@@ -11,7 +11,7 @@
     <QueryRender :query="query">
       <template #default="{ data }">
         <div
-          class="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-5 my-5 place-content-center sm:place-content-start justify-items-center"
+          class="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-5 place-self-center sm:place-self-start"
           v-if="data.rows.length > 0"
         >
           <QRCodeCard v-for="{ doc: qrCode } in data.rows" :key="qrCode!.uri" :qrCode="qrCode!" />