fixes

src/App-styles.tsx

@@ -7,7 +7,10 @@ export const AppContainer = styled(Box)(({ theme }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   padding: "20px 30px 0 30px",
-  backgroundColor: "#323336"
+  backgroundColor: "#323336",
+  [`@media (max-width: 500px)`]: {
+    padding: "10px 5px 0 5px",
+  }
 }));
 
 export const MainContainer = styled(Box)`

src/components/Grids/TradeOffers.tsx

@@ -795,7 +795,7 @@ export const TradeOffers: React.FC<any> = ({ foreignCoinBalance }: any) => {
               width: "450px",
               height: "450px",
               maxHeight: "calc(90vh - 55px)",
-              maxWidth: "90vw",
+              maxWidth: "90%",
               background: "rgb(39, 40, 44)",
               overflow: "auto",
             }}

src/components/header/Header.tsx

@@ -29,6 +29,7 @@ import ErrorIcon from "@mui/icons-material/Error";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import Copy from "../../assets/SVG/Copy.svg";
 import {AddressQRCode} from './AddressQRCode'
+import {FallingLines} from 'react-loader-spinner'
 import {
   Alert,
   AppBar,
@@ -426,7 +427,14 @@ export const Header = ({ qortBalance, foreignCoinBalance }: any) => {
                       width: "auto",
                     }}
                   />
-                  {foreignCoinBalance === null ? "N/A" : foreignCoinBalance}{" "}
+                  {foreignCoinBalance === null ? (
+                    <FallingLines
+                    color="white"
+                    width="30"
+                    visible={true}
+                    ariaLabel="falling-circles-loading"
+                    />
+                  ) : foreignCoinBalance}{" "}
                   {getCoinLabel()}
                 </Box>
                 <CoinActionsRow>