feat: add support for ultrawide screens

src/PageManager.tsx

@@ -359,38 +359,45 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
       >
         <CurrentRelaysProvider>
           <NotificationProvider>
-            <div className="flex h-[var(--vh)] overflow-hidden bg-surface-background">
+            <div className="flex flex-col items-center bg-surface-background">
-              <Sidebar />
+              <div
-              <div className="grid grid-cols-2 gap-2 w-full pr-2 py-2">
+                className="flex h-[var(--vh)] w-full bg-surface-background"
-                <div className="rounded-lg shadow-lg bg-background overflow-hidden">
+                style={{
-                  {primaryPages.map(({ name, element, props }) => (
+                  maxWidth: '1920px'
-                    <div
+                }}
-                      key={name}
+              >
-                      className="flex flex-col h-full w-full"
+                <Sidebar />
-                      style={{
+                <div className="grid grid-cols-2 gap-2 w-full pr-2 py-2">
-                        display: currentPrimaryPage === name ? 'block' : 'none'
+                  <div className="rounded-lg shadow-lg bg-background overflow-hidden">
-                      }}
+                    {primaryPages.map(({ name, element, props }) => (
-                    >
+                      <div
-                      {props ? cloneElement(element as React.ReactElement, props) : element}
+                        key={name}
-                    </div>
+                        className="flex flex-col h-full w-full"
-                  ))}
+                        style={{
-                </div>
+                          display: currentPrimaryPage === name ? 'block' : 'none'
-                <div className="rounded-lg shadow-lg bg-background overflow-hidden">
+                        }}
-                  {secondaryStack.map((item, index) => (
+                      >
+                        {props ? cloneElement(element as React.ReactElement, props) : element}
+                      </div>
+                    ))}
+                  </div>
+                  <div className="rounded-lg shadow-lg bg-background overflow-hidden">
+                    {secondaryStack.map((item, index) => (
+                      <div
+                        key={item.index}
+                        className="flex flex-col h-full w-full"
+                        style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
+                      >
+                        {item.component}
+                      </div>
+                    ))}
                     <div
-                      key={item.index}
+                      key="home"
-                      className="flex flex-col h-full w-full"
+                      className="w-full"
-                      style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
+                      style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}
                     >
-                      {item.component}
+                      <HomePage />
                     </div>
-                  ))}
-                  <div
-                    key="home"
-                    className="w-full"
-                    style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}
-                  >
-                    <HomePage />
                   </div>
                 </div>
               </div>