oceanprotocol · andreip136 · Apr 7, 2026 · Apr 7, 2026 · Apr 8, 2026 · Apr 8, 2026
@@ -6,5 +6,5 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  min-height: 100vh;
+  min-height: 100lvh;
 }
@@ -14,7 +14,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <>
       <Head>
         <title>Ocean Network - Decentralized P2P Compute Network</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className={styles.main}>

@@ -2,6 +2,7 @@
   backdrop-filter: blur(16px);
   /* background: radial-gradient(circle, var(--background-glass), transparent); */
   height: 350px;
+  left: 0;
   mask-image: radial-gradient(
     circle,
     rgba(0, 0, 0, 1) 0%,
@@ -14,13 +15,13 @@
   position: fixed;
   pointer-events: none;
   transform: translate(-150px, -150px);
+  top: 0;
   width: 350px;
   z-index: -1;
 
   @media (min-width: 940px) {
     /* background: linear-gradient(to top, transparent, var(--background-glass)); */
     height: 80px;
-    left: 0;
     mask-image: linear-gradient(
       0deg,
       rgba(0, 0, 0, 0) 0%,
@@ -31,7 +32,6 @@
       rgba(0, 0, 0, 1) 100%
     );
     transform: translate(0, 0);
-    top: 0;
     width: 100%;
   }
 }
@@ -50,6 +50,7 @@
   position: sticky;
   top: 0;
   z-index: 100;
+  padding-top: env(safe-area-inset-top);
 
   .container {
     display: flex;
@@ -98,8 +99,8 @@
     position: fixed;
     top: 0;
     right: 0;
-    width: min(360px, 100vw);
-    height: 100vh;
+    width: min(300px, 100dvw);
+    height: 100dvh;
     padding: 30px 28px;
     display: flex;
     flex-direction: column;

@@ -45,37 +45,14 @@ const Navigation = () => {
 
   useEffect(() => {
     const html = document.documentElement;
-    const body = document.body;
-
     if (isMenuOpen) {
       scrollPositionRef.current = window.scrollY;
       html.style.overflow = 'hidden';
-      body.style.overflow = 'hidden';
-      body.style.position = 'fixed';
-      body.style.top = `-${scrollPositionRef.current}px`;
-      body.style.width = '100%';
     } else {
       html.style.overflow = '';
-      body.style.overflow = '';
-      body.style.position = '';
-      body.style.top = '';
-      body.style.width = '';
-      window.scrollTo(0, scrollPositionRef.current);
     }
-
     return () => {
       html.style.overflow = '';
-      body.style.overflow = '';
-      if (body.style.top) {
-        const scrollY = Math.abs(parseInt(body.style.top, 10));
-        body.style.position = '';
-        body.style.top = '';
-        body.style.width = '';
-        window.scrollTo(0, scrollY || scrollPositionRef.current);
-      } else {
-        body.style.position = '';
-        body.style.width = '';
-      }
     };
   }, [isMenuOpen]);
 

@@ -12,7 +12,7 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import WalletIcon from '@mui/icons-material/Wallet';
 import { ListItemIcon, MenuItem } from '@mui/material';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Button from '../button/button';
 import styles from './navigation.module.css';
 
@@ -28,6 +28,7 @@ const ProfileButton = () => {
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [isClient, setIsClient] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   // This is a workaround for the modal not closing after connecting
   // https://github.com/alchemyplatform/aa-sdk/issues/2327
@@ -43,7 +44,7 @@ const ProfileButton = () => {
   }, []);
 
   const handleOpenMenu = () => {
-    setAnchorEl(document.getElementById('profile-button'));
+    setAnchorEl(buttonRef.current);
   };
 
   const handleCloseMenu = () => {
@@ -71,6 +72,7 @@ const ProfileButton = () => {
           account.address ? <Avatar accountId={account.address} size="sm" src={ensProfile?.avatar} /> : <WalletIcon />
         }
         id="profile-button"
+        ref={buttonRef}
         onClick={() => {
           handleOpenMenu();
         }}

@@ -1,7 +1,8 @@
 .root {
-  align-items: center;
+  align-items: flex-start;
   display: flex;
-  flex-direction: row;
+  flex-wrap: wrap;
+  flex-direction: column;
   font-size: 12px;
   gap: 8px;
 
@@ -13,7 +14,17 @@
   }
 
   .divider {
-    height: 12px;
+    display: none;
+  }
+
+  @media (min-width: 576px) {
+    align-items: center;
+    flex-direction: row;
+
+    .divider {
+      display: block;
+      height: 12px;
+    }
   }
 
   .result {

@@ -1,7 +1,7 @@
 import { CircularProgress } from '@mui/material';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { MouseEventHandler, ReactNode, useState } from 'react';
+import { forwardRef, MouseEventHandler, ReactNode, useState } from 'react';
 import styles from './button.module.css';
 
 export type ButtonProps = {
@@ -22,7 +22,7 @@ export type ButtonProps = {
   variant?: 'filled' | 'glass' | 'outlined' | 'transparent';
 };
 
-const Button = ({
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   autoLoading,
   children,
   className,
@@ -38,7 +38,7 @@ const Button = ({
   size = 'md',
   type = 'button',
   variant = 'filled',
-}: ButtonProps) => {
+}, ref) => {
   const [innerLoading, setInnerLoading] = useState(false);
 
   const isLoading = loading || innerLoading;
@@ -84,13 +84,15 @@ const Button = ({
   }
 
   return (
-    <button className={classes} disabled={isDisabled} id={id} onClick={handleClick} type={type}>
+    <button className={classes} disabled={isDisabled} id={id} onClick={handleClick} ref={ref} type={type}>
       {spinner}
       {contentBefore}
       {children}
       {contentAfter}
     </button>
   );
-};
+});
+
+Button.displayName = 'Button';
 
 export default Button;
@@ -3,11 +3,17 @@ import CheckIcon from '@mui/icons-material/Check';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { useState } from 'react';
 
-type CopyButtonProps = Pick<ButtonProps, 'color' | 'size' | 'variant'> & {
+type CopyButtonProps = Pick<ButtonProps, 'className' | 'color' | 'size' | 'variant'> & {
   contentToCopy: string;
 };
 
-const CopyButton = ({ color = 'accent2', contentToCopy, size = 'sm', variant = 'filled' }: CopyButtonProps) => {
+const CopyButton = ({
+  className,
+  color = 'accent2',
+  contentToCopy,
+  size = 'sm',
+  variant = 'filled',
+}: CopyButtonProps) => {
   const [copied, setCopied] = useState(false);
 
   const handleClick = () => {
@@ -20,6 +26,7 @@ const CopyButton = ({ color = 'accent2', contentToCopy, size = 'sm', variant = '
 
   return (
     <Button
+      className={className}
       color={color}
       contentBefore={copied ? <CheckIcon /> : <ContentCopyIcon />}
       onClick={handleClick}

@@ -1,3 +1,15 @@
+.root {
+  --padding-sm: 14px;
+  --padding-md: 18px;
+  --padding-lg: 24px;
+
+  @media (min-width: 576px) {
+    --padding-sm: 24px;
+    --padding-md: 32px;
+    --padding-lg: 48px;
+  }
+}
+
 /* Directions */
 .direction-column {
   display: flex;
@@ -10,41 +22,41 @@
 
 /* Paddings */
 .padding-sm {
-  padding: 24px;
+  padding: var(--padding-sm);
 }
 .padding-md {
-  padding: 32px;
+  padding: var(--padding-md);
 }
 .padding-lg {
-  padding: 48px;
+  padding: var(--padding-lg);
 }
 
 /* X paddings */
 .paddingX-sm {
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-left: var(--padding-sm);
+  padding-right: var(--padding-sm);
 }
 .paddingX-md {
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-left: var(--padding-md);
+  padding-right: var(--padding-md);
 }
 .paddingX-lg {
-  padding-left: 48px;
-  padding-right: 48px;
+  padding-left: var(--padding-lg);
+  padding-right: var(--padding-lg);
 }
 
 /* Y paddings */
 .paddingY-sm {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-top: var(--padding-sm);
+  padding-bottom: var(--padding-sm);
 }
 .paddingY-md {
-  padding-top: 32px;
-  padding-bottom: 32px;
+  padding-top: var(--padding-md);
+  padding-bottom: var(--padding-md);
 }
 .paddingY-lg {
-  padding-top: 48px;
-  padding-bottom: 48px;
+  padding-top: var(--padding-lg);
+  padding-bottom: var(--padding-lg);
 }
 
 /* Radii */

@@ -1,12 +1,26 @@
 .root {
-  align-items: start;
   background: var(--background-glass-secondary);
   border-radius: 16px;
   display: flex;
+  flex-direction: column;
   font-family: monospace;
-  gap: 16px;
-  justify-content: space-between;
+  gap: 8px;
   line-height: 2;
   padding: 8px 8px 8px 16px;
   white-space: pre-wrap;
+  word-break: break-word;
+
+  .copyButton {
+    align-self: flex-end;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    gap: 16px;
+    justify-content: space-between;
+
+    .copyButton {
+      align-self: flex-start;
+    }
+  }
 }
@@ -9,7 +9,7 @@ export const CodeBlock = ({ code }: CodeBlockProps) => {
   return (
     <div className={styles.root}>
       <div>{code}</div>
-      <CopyButton color="accent2" contentToCopy={code} variant="filled" />
+      <CopyButton className={styles.copyButton} color="accent2" contentToCopy={code} variant="filled" />
     </div>
   );
 };
@@ -1,5 +1,5 @@
 .root {
-  width: calc(100% - 40px);
+  width: calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
   max-width: 1160px;
   margin: 0 auto;
 }