fix center

src/assets/main.css

@@ -2,6 +2,8 @@
 
 body {
   overflow: hidden;
+  background-color: black;
+  scrollbar-width: none;
 }
 
 @font-face {
@@ -28,3 +30,9 @@ body {
     margin: 0 auto;
   }
 }
+
+.center-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/GameWindow.vue

@@ -117,22 +117,23 @@ onMounted(() => {
 </script>
 
 <template>
-
-  <div class="body-custom">
-
+  <div>
     <GameHeader></GameHeader>
 
     <GameInputForm v-model="isPlaceFilled" :gameState="gameState" :login="login" :password="password"></GameInputForm>
 
-    <!-- Действия -->
-    <div class="messages-block" ref="scrollContainer">
-      <div class="center-block-custom">
-        <div v-if="!team || !team.actions.length">
-          <div class="center-message">
-            <WelcomeGameBlock :qrurl="qrurl" :team="team.name"></WelcomeGameBlock>
-          </div>
+    <!-- Qr Код -->
+    <div v-if="!team || !team.actions.length">
+      <div class="messages-block center-container">
+        <div class="center-block-custom">
+          <WelcomeGameBlock :qrurl="qrurl" :team="team.name"></WelcomeGameBlock>
         </div>
-        <div v-else>
+      </div>
+    </div>
+    <!-- Действия -->
+    <div v-else>
+      <div class="messages-block" ref="scrollContainer">
+        <div class="center-block-custom">
           <div v-for="(action, index) in team.actions" :key="action.id">
             <MessageCloud v-model="isPlaceFilled" :action="action" :gameState="gameState" :login="login"
               :password="password" :index="index" :count="team.actions.length"></MessageCloud>
@@ -140,15 +141,14 @@ onMounted(() => {
         </div>
       </div>
     </div>
-
   </div>
-
 </template>
 
 <style scoped>
-.body-custom {
-  font-size: medium;
-  height: calc(100vh - 100px);
+.aaa {
+  width: 100px;
+  height: 2000px;
+  border: solid 2px red;
 }
 
 .game-input-form-shadow {
@@ -163,16 +163,16 @@ onMounted(() => {
 }
 
 .messages-block {
-  top: 95px;
-  height: calc(100dvh - 100px - 76px);
+  top: 90px;
+  /* height: calc(100dvh - 100px - 76px); */
+  /* 90px от верхнего края экрана до второго ремня */
+  /* 100px от верхнего края экрана до края иконки */
+  /* 76px от нижнего края экрана до края ремня */
+  height: calc(100dvh - 90px - 76px);
   overflow-y: auto;
   scrollbar-width: none;
   position: relative;
-  padding: 5px 10px 15px 10px;
-}
-
-.center-message {
-  height: calc(100dvh - 140px);
+  padding: 15px 10px 15px 10px;
 }
 
 .team-name-block {

src/components/WelcomeGameBlock.vue

@@ -16,7 +16,7 @@ const qrOptions = ref<QROptions>({
   margin: 1,
   color: {
     dark: '#303030',
-    light: 'none'
+    light: '#f0f0f0'
   }
 });
 
@@ -50,6 +50,11 @@ const props = withDefaults(defineProps<Props>(), {})
   width: 200px;
 }
 
+.qr-code {
+  margin: 12px 0;
+  box-shadow: 0px 3px 15px rgb(98, 98, 98);
+}
+
 .team-name {
   margin: 10px 0;
   font-size: 20px;