fix: scrolling and height on mobile.

spectrum-finance · Sep 20, 2024 · c8b138a · c8b138a
1 parent 82d5236
commit c8b138a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,6 @@
   <title>Spectrum</title>
   <style>
     #app { height: 100% }
-    #app > div { height: 100% }
   </style>
 </head>
 <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Typography } from '@ergolabs/ui-kit';
+import { Box, Flex, Typography, useDevice } from '@ergolabs/ui-kit';
 import { Suspense, useEffect } from 'react';
 import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
@@ -40,6 +40,7 @@ const initializeApp = () => {
 export const ApplicationInitializer: React.FC = () => {
   const [{ theme }] = useApplicationSettings();
   const [] = useObservable(isAppInitialized$, [], false);
+  const { s } = useDevice();
 
   useBodyClass([theme]);
   useMetaThemeColor(
@@ -63,8 +64,12 @@ export const ApplicationInitializer: React.FC = () => {
         <BrowserRouter>
           <LanguageProvider>
             <Glow />
-            <Flex align="center" justify="center">
-              <Box borderRadius="xl" padding={4}>
+            <Flex
+              align="center"
+              justify="center"
+              style={{ height: s ? undefined : '100%' }}
+            >
+              <Box borderRadius="xl" padding={s ? [4, 4, 20, 4] : 4}>
                 <Flex style={{ maxWidth: '500px' }} col>
                   <Typography.Body>Dear Community Member,</Typography.Body>
                   <br />

diff --git a/src/assets/styles/styles.less b/src/assets/styles/styles.less
@@ -18,7 +18,7 @@ html {
 }
 
 body {
-  overflow: hidden;
+  overflow: auto;
   width: 100%;
   height: 100%;
   background-color: var(--spectrum-body-bg);