fix devices styling

Author: Septias

frontend/App.tsx

@@ -54,7 +54,7 @@ const App: Component = () => {
           <Tab>Main</Tab>
           <Tab>Info</Tab>
         </TabList>
-        <TabPanel flexGrow="1">
+        <TabPanel flexGrow="1" maxHeight="calc(100vh - 40px)">
           <AppRoutes />
         </TabPanel>
         <TabPanel>

frontend/Main.tsx

@@ -42,8 +42,8 @@ const Main: Component = () => {
                 }}
               />
             </Flex>
-            <Box>
-              <Flex flexWrap="wrap" gap="$5">
+            <Box overflow="auto" >
+              <Flex flexWrap="wrap" gap="$5" justifyContent="center">
                 <For each={instances()}>
                   {(instance: InstanceData) => (
                     <Instance instance={instance} setSearch={setSearchAndOpen} />
@@ -53,7 +53,7 @@ const Main: Component = () => {
             </Box>
           </Flex>
           <Box>
-            <Box position="sticky" top="20px">
+            <Box>
               <Heading level="1" mb="1">Messages</Heading>
               <Sidebar search={search} setSearch={setSearchAndOpen} />
             </Box>

frontend/index.html

@@ -14,6 +14,7 @@
       }
       .splitview-container__left {
           width: 60%;
+          min-width: 440px;
           display: flex;
           overflow: none;
           padding: 5px;