make messages auto-scroll

Author: Septias

frontend/Main.tsx

@@ -52,11 +52,9 @@ const Main: Component = () => {
               </Flex>
             </Box>
           </Flex>
-          <Box>
-            <Box>
-              <Heading level="1" mb="1">Messages</Heading>
-              <Sidebar search={search} setSearch={setSearchAndOpen} />
-            </Box>
+          <Box overflow="auto">
+            <Heading level="1" mb="1">Messages</Heading>
+            <Sidebar search={search} setSearch={setSearchAndOpen} />
           </Box>
         </SplitView>
 

frontend/Messages.tsx

@@ -24,35 +24,33 @@ const Messages: Component<{
   });
 
   return (
-    <Box overflow="auto">
-      <Table id="messages" dense css={{ "table-layout": "fixed" }}>
-        <Thead>
-          <Th maxW="70px"> Id </Th>
-          <Th maxW="70px">Type</Th>
-          <Th maxW="70px">Descr</Th>
-          <Th>Payload</Th>
-        </Thead>
-        <Tbody>
-          <For
-            each={getMessages({
-              instanceId: props.search().instanceId,
-              type: props.search().type,
-            })}
-          >
-            {(message, index) => (
-              <MessageRow
-                isSelected={messageIndex() === index()}
-                message={message}
-                onSelect={(message) => {
-                  setMessageIndex(index());
-                  props.onSelectMessage(message);
-                }}
-              />
-            )}
-          </For>
-        </Tbody>
-      </Table>
-    </Box>
+    <Table id="messages" dense css={{ "table-layout": "fixed" }}>
+      <Thead>
+        <Th maxW="70px"> Id </Th>
+        <Th maxW="70px">Type</Th>
+        <Th maxW="70px">Descr</Th>
+        <Th>Payload</Th>
+      </Thead>
+      <Tbody>
+        <For
+          each={getMessages({
+            instanceId: props.search().instanceId,
+            type: props.search().type,
+          })}
+        >
+          {(message, index) => (
+            <MessageRow
+              isSelected={messageIndex() === index()}
+              message={message}
+              onSelect={(message) => {
+                setMessageIndex(index());
+                props.onSelectMessage(message);
+              }}
+            />
+          )}
+        </For>
+      </Tbody>
+    </Table>
   );
 };
 

frontend/Sidebar.tsx

@@ -20,27 +20,23 @@ const Sidebar: Component<{
   const [message, setMessage] = createSignal<Message | null>(null);
 
   return (
-    <Flex height="100%" flexDirection="column" justifyContent="space-between">
-      <Box>
-        <Filters value={props.search()} onChange={props.setSearch} />
-        <Tabs>
-          <TabList>
-            <Tab>Messages</Tab>
-            <Tab>Chat</Tab>
-          </TabList>
-          <TabPanel>
-            <Messages search={props.search} onSelectMessage={setMessage} />
-          </TabPanel>
-          <TabPanel>
-            <Chat search={props.search} onSelectMessage={setMessage} />
-          </TabPanel>
-        </Tabs>
-      </Box>
-      <Box>
-        <Show when={message()}>
-          {(message) => <MessageDetails message={message} />}
-        </Show>
-      </Box>
+    <Flex height="100%" flexDirection="column" overflow="auto">
+      <Filters value={props.search()} onChange={props.setSearch} />
+      <Tabs>
+        <TabList>
+          <Tab>Messages</Tab>
+          <Tab>Chat</Tab>
+        </TabList>
+        <TabPanel>
+          <Messages search={props.search} onSelectMessage={setMessage} />
+        </TabPanel>
+        <TabPanel>
+          <Chat search={props.search} onSelectMessage={setMessage} />
+        </TabPanel>
+      </Tabs>
+      <Show when={message()}>
+        {(message) => <MessageDetails message={message} />}
+      </Show>
     </Flex>
   );
 };