ui fix + initial load fix

push-protocol · Nov 11, 2024 · 787787a · 787787a
1 parent 471f134
commit 787787a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 28 deletions.
diff --git a/components/Home/OverView.tsx b/components/Home/OverView.tsx
@@ -24,7 +24,7 @@ const OverView: FC<OverViewProps> = () => {
       border="border-xmd solid stroke-secondary"
       backgroundColor="surface-primary"
       borderRadius="radius-md"
-      width="100%"
+      width="-webkit-fill-available"
     >
       <Skeleton isLoading={isLoading}>
         <Box

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,28 +1,62 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
 
-export default function Document() {
-  return (
-    <Html lang='en'>
-      <Head>
-        <link rel="shortcut icon" href='./static/push.png' />
-        <meta
-          name="description"
-          content="push protocol analytics dashboard"
-        />
-        <meta
-          name="keywords"
-          content="Push,Communication,Notification,Chat"
-        />
-        <meta name="author" content="Push Protocol" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1.0"
-        />
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      // Collect styles from all components rendered
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      // Fetch initial props for the document
+      const initialProps = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link rel="shortcut icon" href="./static/push.png" />
+          <meta
+            name="description"
+            content="push protocol analytics dashboard"
+          />
+          <meta
+            name="keywords"
+            content="Push,Communication,Notification,Chat"
+          />
+          <meta name="author" content="Push Protocol" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }
+
+export default MyDocument;
diff --git a/theme/globalStyles.ts b/theme/globalStyles.ts
@@ -28,7 +28,6 @@ export const GlobalStyles = createGlobalStyle`
     url('${basePath}/static/fonts/FKGroteskNeue-Bold.woff') format('woff');
   font-weight: 700 800;
   font-style: normal;
-  font-display: swap;
 }
 
   body {