Фикс верстки на экране Backup

app/components/TextChain/TextChain.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 interface TextChainProps {
     text: string;
     mt?: MantineSize;
+    withoutPaper?: boolean;
 }
 
 export function TextChain(props : TextChainProps) {
@@ -26,31 +27,41 @@ export function TextChain(props : TextChainProps) {
         });
     }, [text]);
 
+    const grid = (
+         <SimpleGrid cols={3} spacing="xs">
+            {text.split(" ").map((v, i) => {
+                return (
+                    <Box 
+                        key={i}
+                        className={classes.wordBox}
+                        style={{
+                            opacity: mounted[i] ? 1 : 0,
+                            transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
+                            transition: 'opacity 300ms ease, transform 300ms ease',
+                        }}
+                    >
+                        <Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
+                        <Text size="sm" fw={500}>{v}</Text>
+                    </Box>
+                );
+            })}
+        </SimpleGrid>
+    );
+
     return (
+        !props.withoutPaper ? (
         <Box mt={props.mt}>
             <Box className={classes.displayArea}>
                 <Text size="sm" mb="md" c="dimmed">
                     Your seed phrase:
                 </Text>
-                <SimpleGrid cols={3} spacing="xs">
+                {grid}
-                    {text.split(" ").map((v, i) => {
-                        return (
-                            <Box 
-                                key={i}
-                                className={classes.wordBox}
-                                style={{
-                                    opacity: mounted[i] ? 1 : 0,
-                                    transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
-                                    transition: 'opacity 300ms ease, transform 300ms ease',
-                                }}
-                            >
-                                <Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
-                                <Text size="sm" fw={500}>{v}</Text>
-                            </Box>
-                        );
-                    })}
-                </SimpleGrid>
             </Box>
         </Box>
+        ) : (
+        <Box mt={props.mt}>
+            {grid}
+        </Box>
+        )
     )
 }

app/views/Backup/Backup.tsx

@@ -5,7 +5,7 @@ import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
 import { TextChain } from "@/app/components/TextChain/TextChain";
 import { decodeWithPassword } from "@/app/crypto/crypto";
 import { useAccount } from "@/app/providers/AccountProvider/useAccount";
-import { Paper, Text } from "@mantine/core";
+import { Text } from "@mantine/core";
 import { useState } from "react";
 
 export function Backup() {
@@ -39,10 +39,8 @@ export function Backup() {
                 </Text>        
                 {show.trim() !== "" && (
                 <>
-                    <Paper mt={'sm'} p={'md'} withBorder>
+                    <TextChain withoutPaper mt={'sm'} text={show}></TextChain>
-                        <TextChain rainbow={true} mt={'sm'} text={show}></TextChain>
+                    <Text fz={10} mt={'sm'} c={'gray'} pl={'xs'} pr={'xs'}>
-                    </Paper>
-                    <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                         Please don't share your seed phrase! The administration will never ask you for it.
                     </Text>
                 </>