feat: app zoom out on small screens (#2708)

novasamatech · Nov 21, 2024 · b7d4f38 · b7d4f38
1 parent 424cd63
commit b7d4f38
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 7 deletions.
diff --git a/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx b/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx
@@ -2,7 +2,7 @@ import logo from './assets/logo.svg';
 
 export const ElectronSplashScreen = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center duration-500 animate-in fade-in">
+    <div className="flex h-full w-screen items-center justify-center duration-500 animate-in fade-in">
       <img src={logo} />
     </div>
   );

diff --git a/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx b/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx
@@ -53,7 +53,7 @@ export const WebSplashScreen = () => {
   }, []);
 
   return (
-    <div className="flex h-screen w-full items-center justify-center p-4 font-manrope duration-500 animate-in fade-in">
+    <div className="flex h-full w-full items-center justify-center p-4 font-manrope duration-500 animate-in fade-in">
       <div className="fixed -top-[1100px] left-[50%] h-[1140px] w-[1140px] -translate-x-[50%] rounded-full bg-[#FF57E4] blur-[215px]" />
       <div className="z-10 flex flex-col items-center gap-[86px]">
         <div className="flex items-center gap-[88px]">

diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css
@@ -6,15 +6,24 @@
 
 html, body {
   width: 100%;
+  max-height: 100%;
   height: 100%;
   overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
 }
 
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (max-aspect-ratio: 32 / 25) and (width < 1024px) {
+  html, body {
+    max-height: 800px;
+  }
+}
+
+
 /* Scrollbar for Firefox */
 * {
   scrollbar-width: thin;

diff --git a/src/renderer/app/index.html b/src/renderer/app/index.html
@@ -11,7 +11,8 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--    This tag commented on purpose - that's the way to "support" mobile devices-->
+    <!--    <meta name="viewport" content="width=device-width, initial-scale=1" />-->
     <meta name="theme-color" content="#7b29ff" />
     <meta name="title" content="Nova Spektr" />
     <meta name="description" content="Enterprise desktop wallet for Polkadot supporting multisigs, staking, light clients and more" />
@@ -38,6 +39,6 @@
     <title>Nova Spektr</title>
   </head>
   <body>
-    <div id="app" class="text-body"></div>
+    <div id="app" class="text-body h-full overflow-hidden"></div>
   </body>
 </html>
diff --git a/src/renderer/features/app-shell/components/AppShell.tsx b/src/renderer/features/app-shell/components/AppShell.tsx
@@ -11,7 +11,7 @@ export const AppShell = memo(() => {
   const headerNodes = useSlot(navigationHeaderSlot);
 
   return (
-    <div className="flex h-screen animate-in fade-in">
+    <div className="flex h-full animate-in fade-in">
       <aside className="flex w-[240px] shrink-0 flex-col gap-y-6 border-r border-r-container-border bg-left-navigation-menu-background p-4">
         {headerNodes}
         <Navigation />

diff --git a/src/renderer/pages/Onboarding/Welcome/Welcome.tsx b/src/renderer/pages/Onboarding/Welcome/Welcome.tsx
@@ -36,7 +36,7 @@ export const Welcome = () => {
   }, []);
 
   return (
-    <div className="flex h-screen w-full animate-in fade-in">
+    <div className="flex h-full w-full animate-in fade-in">
       <div className="flex h-full w-[512px] flex-col p-10">
         <TitleText className="mb-8">{t('onboarding.welcome.title')}</TitleText>
 

diff --git a/src/renderer/shared/ui/FallbackScreen/FallbackScreen.tsx b/src/renderer/shared/ui/FallbackScreen/FallbackScreen.tsx
@@ -7,7 +7,7 @@ export const FallbackScreen = () => {
   const { t } = useI18n();
 
   return (
-    <main className="flex h-screen flex-col items-center justify-center gap-4 bg-cover">
+    <main className="flex h-full flex-col items-center justify-center gap-4 bg-cover">
       <Icon as="img" name="computer" size={172} />
       <BodyText className="text-text-tertiary">{t('fallbackScreen.message')}</BodyText>
       <Button onClick={() => window.location.reload()}>{t('fallbackScreen.reloadButton')}</Button>