From 22210537e71107f96f1204b2fb840849bbffac89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Eorkell=20M=C3=A1ni=20=C3=9Eorkelsson?=
 <wowthorkell@gmail.com>
Date: Thu, 30 Jan 2025 10:52:04 +0000
Subject: [PATCH] fix(web): MobileAppBanner hydration error fix suggestion
 (#17671)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: init

* fix: more fix

---------

Co-authored-by: Jón Levy <levy@andes.is>
---
 apps/web/components/MobileAppBanner/MobileAppBanner.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/MobileAppBanner/MobileAppBanner.tsx b/apps/web/components/MobileAppBanner/MobileAppBanner.tsx
index cbbed5dfa6f2..17c975589acc 100644
--- a/apps/web/components/MobileAppBanner/MobileAppBanner.tsx
+++ b/apps/web/components/MobileAppBanner/MobileAppBanner.tsx
@@ -56,14 +56,13 @@ export const MobileAppBanner = ({ namespace }: MobileAppBannerProps) => {
     setIsMounted(true)
   }, [])
 
-  return hidden ? null : (
-    <Hidden print={true}>
+  return (
+    <Hidden screen={hidden || !isMounted} print={true}>
       <Box
         background="blue400"
         display="flex"
         className={style.container}
         alignItems={'center'}
-        style={{ visibility: isMounted ? 'visible' : 'hidden' }}
       >
         <button
           className={style.closeBtn}