fix

src/components/LoginWindow.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { apiGetTeam } from './client';
 import { UnauthorizedError } from './UnauthorizedError';
+import MessagePaper from './MessagePaper.vue';
 
 const router = useRouter();
 
@@ -53,28 +54,31 @@ onMounted(() => {
   </div>
 
   <div class="center-message">
-    <form @submit.prevent="onClickLogin">
-      <div>
-        <input class="input-custom" v-model="login" type="text" placeholder="Название команды">
-      </div>
-      <div>
-        <input class="input-custom" v-model="password" type="text" placeholder="Пароль" autocapitalize="off">
-      </div>
-      <div class="button-container">
-        <button class="button-custom" type="submit">{{ buttonText }}</button>
-      </div>
-      <div class="error-message">
-        {{ errorMsg }}
-      </div>
-    </form>
+    <MessagePaper>
+      <form @submit.prevent="onClickLogin">
+        <div>
+          <input class="input-custom" v-model="login" type="text" placeholder="Название команды">
+        </div>
+        <div>
+          <input class="input-custom" v-model="password" type="text" placeholder="Пароль" autocapitalize="off">
+        </div>
+        <div class="button-container">
+          <button class="button-custom" type="submit">{{ buttonText }}</button>
+        </div>
+        <div class="error-message">
+          {{ errorMsg }}
+        </div>
+      </form>
+    </MessagePaper>
   </div>
 </template>
 
 <style scoped>
 .input-custom {
   width: 100%;
-  box-sizing: border-box; /* обязательно! */
-  margin-right: 15px;
+  box-sizing: border-box;
+  /* обязательно! */
+  margin: 10px 0;
 }
 
 .error-message {
@@ -82,7 +86,8 @@ onMounted(() => {
   margin: 16px 0;
 }
 
-.input-custom, .button-custom {
+.input-custom,
+.button-custom {
   padding: 12px 16px;
   border: 1px solid #ddd;
   border-radius: 15px;

src/components/MessageCloud.vue

@@ -69,12 +69,13 @@ async function letsgo(place: string) {
 
 .message-header {
   font-size: 20px;
+  padding-right: 50px;
 }
 
 .collapse-icon {
   position: absolute;
-  top: 8px;
-  right: 10px;
+  top: 12px;
+  right: 14px;
   width: 45px;
   height: 32px;
   cursor: pointer;
@@ -124,7 +125,7 @@ async function letsgo(place: string) {
 }
 
 .message-footer {
-  padding-right: 40px;
+  padding-right: 50px;
   font-weight: 400;
   color: var(--second-color);
   position: relative;