updates

src/assets/base.css

@@ -90,3 +90,7 @@ body {
 .n-modal [class~='n-card__content'] {
   padding: 24px;
 }
+
+.n-modal [class~='n-card__footer'] {
+  padding: 0 24px 24px;
+}

src/components/ScreenPage.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router'
 import { getAuthClient } from '@/api/auth_client'
 import type { Game, ScreenState } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import { formatGameDateTime } from '@/utils/datetime'
 
 const sessionKey = 'evening-detective-screen-session'
 const client = getAuthClient()
@@ -32,7 +33,10 @@ const qrValue = computed(() => {
   return url.toString()
 })
 const gameOptions = computed(() =>
-  games.value.map((game) => ({ label: game.name || `Игра ${game.id}`, value: game.id! })),
+  games.value.map((game) => ({
+    label: `${formatGameDateTime(game.startAt).split(',')[0] || 'дата не указана'} — ${game.name || `Игра ${game.id}`}`,
+    value: game.id!,
+  })),
 )
 
 function saveSession() {
@@ -184,6 +188,22 @@ onUnmounted(() => {
   width: 100%;
 }
 
+.binding-card p,
+.qr-card p,
+.ready-card p {
+  margin: 0 0 16px;
+}
+
+.binding-card .n-select {
+  margin-bottom: 8px;
+}
+
+.binding-card .n-button,
+.qr-card .n-button,
+.ready-card .n-button {
+  margin-top: 8px;
+}
+
 .ready-title {
   font-size: 28px;
 }