Пофиксили мелкие баги в стилях

src/App.vue

@@ -356,12 +356,10 @@ function onContextMenu(e, item) {
                 <p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
                 <p v-else>Выстройте маршрут перед сохранением кода.</p>
             </main>
-            <template #footer>
+            <template v-if="listOfTrips.length" #footer>
-                <div v-if="listOfTrips.length">
+                <button @click="isCodeViewVisible = true">Предпросмотр</button>
-                    <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                <button @click="handleDownloadBtn">Скачать код</button>
-                    <button @click="handleDownloadBtn">Скачать код</button>
+                <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                    <button @click="copyAndToast(finallyText)">Скопировать код</button>
-                </div>
             </template>
         </MyDialog>
     </div>
@@ -383,7 +381,8 @@ body {
 }
 
 :root {
-    --side: 75px;
+    --side: 8vh;
+    --sizeActions: 5vh;
 }
 
 .wraper {
@@ -396,36 +395,40 @@ body {
     display: grid;
     padding: 3px;
     grid-template-columns: repeat(10, var(--side));
+    grid-template-rows: repeat(10, var(--side));
     gap: 5px;
     user-select: none;
 }
 
 .square {
-    width: var(--side);
+    width: 100%;
-    height: var(--side);
+    height: 100%;
+    text-align: center;
     background-size: cover;
-    border: 3px solid rgb(251, 251, 251);
+    border: 3px solid #ffffff;
     cursor: pointer;
     overflow-y: scroll;
 
     background-blend-mode: multiply;
-    background-color: transparent;
+    background-color: #ffffff;
     transition: background-color 0.3s ease;
 
-    color: white;
+    color: #2267fce2;
-    text-shadow: -1px -1px 0 black,
+    text-shadow: -1px -1px 0 #fff,
-    1px -1px 0 black,
+    1px -1px 0 #fff,
-    -1px 1px 0 black,
+    -1px 1px 0 #fff,
-    1px 1px 0 black;
+    1px 1px 0 #fff;
     box-sizing: border-box;
+    font-size: 1.1rem;
+    font-weight: bold
 }
 
 .square:hover {
-    background-color: rgb(166, 162, 162);
+    background-color: #949494;
 }
 
 .square:active {
-    background-color: rgb(164, 162, 162);
+    background-color: #747474;
 }
 
 .square::-webkit-scrollbar {
@@ -453,8 +456,8 @@ body {
 }
 
 .actions svg {
-    width: 40px;
+    width: var(--sizeActions);
-    height: 40px;
+    height: var(--sizeActions);
     transition: color 0.4s;
 }
 

src/components/CodeView.vue

@@ -18,13 +18,13 @@ const props = defineProps({
     <div class="code-view" v-if="show">
         <CustomButton
             @click.stop="$emit('update:show', false)">
-            Вернуться к сохранению сгенерированного кода
+            Вернуться к генерации маршрута
         </CustomButton>
         <CodeBlock :code="code" />
 
         <CustomButton
             @click.stop="$emit('update:show', false)">
-            Вернуться к сохранению сгенерированного кода
+            Вернуться к генерации маршрута
         </CustomButton>
         <MovementButtons/>
     </div>

src/components/MyDialog.vue

@@ -80,9 +80,9 @@ useEventListener("keydown", handleKeydown);
     overflow-x: auto;
     display: flex;
     flex-direction: column;
-    max-width: 500px;
+    width: 55%;
-    width: 90%;
     border-radius: 5px;
+    font-size: 1.5rem;
 }
 
 .modal-header,
@@ -110,16 +110,17 @@ useEventListener("keydown", handleKeydown);
 }
 
 .modal-footer {
-    justify-content: flex-end;
     border-top: 1px solid white;
+    display: flex;
+    gap: 5px;
 }
 
 .modal-footer button {
-    justify-content: flex-end;
+    width: 33%;
     border-top: 1px solid white;
     padding: 5px;
     color: black;
-    font-size: 15px;
+    font-size: 20px;
     border-radius: 5px;
 }
 

src/components/MyDropMenu.vue

@@ -99,8 +99,8 @@ defineExpose({open: () => (isOpen.value = true), close: closeMenu});
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    width: 40px;
+    min-width: 40px;
-    height: 30px;
+    min-height: 30px;
     background: rgba(255, 255, 255, 0.508);
     border: 1px solid #383838;
     cursor: pointer;
@@ -109,12 +109,18 @@ defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 
 h1 {
     text-align: center;
+    font-size: 3rem;
 }
 
 .menu-content {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    padding-bottom: 20px;
+}
+
+.menu-content button{
+    font-size: 1.2rem;
 }
 
 .line {