From b7d4f38e4a19d30dfb9ea143b3a0acb09e8da048 Mon Sep 17 00:00:00 2001 From: Sergey Zhuravlev Date: Thu, 21 Nov 2024 16:51:27 +0300 Subject: [PATCH] feat: app zoom out on small screens (#2708) --- .../ElectronSplashScreen/ElectronSplashScreen.tsx | 2 +- .../app/components/WebSplashScreen/WebSplashScreen.tsx | 2 +- src/renderer/app/index.css | 9 +++++++++ src/renderer/app/index.html | 5 +++-- src/renderer/features/app-shell/components/AppShell.tsx | 2 +- src/renderer/pages/Onboarding/Welcome/Welcome.tsx | 2 +- src/renderer/shared/ui/FallbackScreen/FallbackScreen.tsx | 2 +- 7 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx b/src/renderer/app/components/ElectronSplashScreen/ElectronSplashScreen.tsx index 5912fc4848..053432a36b 100644 --- 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 ( -
+
); diff --git a/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx b/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx index 1cd0ba3e05..c08b875eca 100644 --- a/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx +++ b/src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx @@ -53,7 +53,7 @@ export const WebSplashScreen = () => { }, []); return ( -
+
diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css index 27b62f0852..4e395397b0 100644 --- a/src/renderer/app/index.css +++ b/src/renderer/app/index.css @@ -6,8 +6,10 @@ html, body { width: 100%; + max-height: 100%; height: 100%; overflow: hidden; + transition: max-height 0.5s ease-in-out; } body { @@ -15,6 +17,13 @@ body { -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 index 3684b8bcd0..6078a5917e 100644 --- a/src/renderer/app/index.html +++ b/src/renderer/app/index.html @@ -11,7 +11,8 @@ - + + @@ -38,6 +39,6 @@ Nova Spektr -
+
diff --git a/src/renderer/features/app-shell/components/AppShell.tsx b/src/renderer/features/app-shell/components/AppShell.tsx index fceb9badd0..ffd3eb5997 100644 --- 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 ( -
+