fix(actionBar): style

front/src/components/ActionBar/ActionBar.module.scss

@@ -1,11 +1,34 @@
-.wrapper {
-  z-index: 1;
-  position: fixed;
-  bottom: 0;
+.ActionBarContainer {
   display: flex;
+  align-items: center;
   justify-content: center;
+  width: 100%;
+  position: fixed;
+  bottom: 0px;
   left: 0;
-  gap: 0 20px;
-  padding: 0 10%;
-  right: 0;
-}
+  padding: 10px 0;
+  background: linear-gradient(0deg,
+      rgba(0, 0, 0, 0.93) 96%,
+      rgba(0, 0, 0, 0) 100%);
+  z-index: 2;
+
+  &Content {
+    max-width: 1000px;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 25px;
+    justify-content: center;
+    position: relative;
+    padding: 0 70px;
+    padding-bottom: 10px;
+  }
+
+  @media (max-width: 540px) {
+    &Content {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

front/src/components/ActionBar/ActionBar.tsx

@@ -1,8 +1,12 @@
-import React from "react";
 import styles from "./ActionBar.module.scss";
 
 function ActionBar({ children }) {
-  return <div className={styles.wrapper}>{children}</div>;
+  return (
+    <div className={styles.ActionBarContainer}>
+      <div className={styles.ActionBarContainerContent}>{children}</div>
+    </div>
+  );
 }
 
+
 export default ActionBar;

front/src/components/MainContainer/styles.module.scss

@@ -13,9 +13,11 @@
 
   @media (max-width: 540px) {
     width: 100% !important;
+    padding-left: 5px;
+    padding-right: 5px;
   }
 }
 
 .noMaxWidth {
   max-width: unset;
-}
+}

front/src/pages/Main/Main.tsx

@@ -17,6 +17,7 @@ import MusicalAddress from "@/components/MusicalAddress/MusicalAddress";
 import Passport from "./Passport/Passport";
 import ActionBar from "@/components/ActionBar/ActionBar";
 import { sendProof } from "@/api/cyber";
+import { trimString } from "@/utils/trimString";
 
 const tele = (window as any).Telegram.WebApp;
 
@@ -169,7 +170,7 @@ const Main = () => {
   } else if (step === Steps.ADD_PASSPORT) {
     actionBarContent = (
       <>
-        your passport is {passport?.owner}
+        your passport is {trimString(passport?.owner)}
         <TonWallet nickname={nickname} type="passport" />
         {passportProof && (
           <div

front/src/utils/trimString.ts

@@ -1,6 +1,6 @@
 export const trimString = (address, firstArg, secondArg) => {
-  const first = firstArg || 3;
-  const second = secondArg || 8;
+  const first = firstArg || 11;
+  const second = secondArg || 4;
 
   if (address && address.length > 11) {
     return `${address.substring(0, first)}...${address.substring(