fix: adjust layout styles for better responsiveness

src/PageManager.tsx

@@ -342,14 +342,14 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
       >
         <CurrentRelaysProvider>
           <NotificationProvider>
-            <div className="flex h-screen overflow-hidden bg-surface-background">
+            <div className="flex h-[var(--vh)] overflow-hidden bg-surface-background">
               <Sidebar />
-              <div className="grid grid-cols-2 gap-2 w-full pr-2">
-                <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
+              <div className="grid grid-cols-2 gap-2 w-full pr-2 py-2">
+                <div className="rounded-lg shadow-lg bg-background overflow-hidden">
                   {primaryPages.map(({ name, element, props }) => (
                     <div
                       key={name}
-                      className="w-full"
+                      className="flex flex-col h-full w-full"
                       style={{
                         display: currentPrimaryPage === name ? 'block' : 'none'
                       }}
@@ -358,11 +358,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                     </div>
                   ))}
                 </div>
-                <div className="flex rounded-lg my-2 max-h-screen shadow-md bg-background overflow-hidden">
+                <div className="rounded-lg shadow-lg bg-background overflow-hidden">
                   {secondaryStack.map((item, index) => (
                     <div
                       key={item.index}
-                      className="w-full"
+                      className="flex flex-col h-full w-full"
                       style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
                     >
                       {item.component}

src/main.tsx

@@ -8,6 +8,13 @@ import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import { ErrorBoundary } from './components/ErrorBoundary.tsx'
 
+const setVh = () => {
+  document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
+}
+window.addEventListener('resize', setVh)
+window.addEventListener('orientationchange', setVh)
+setVh()
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ErrorBoundary>