feat: Optimize UI layout and page hierarchy

src/components/connection/connection-table.tsx

@@ -115,9 +115,6 @@ export const ConnectionTable = (props: Props) => {
       sx={{
         border: "none",
         "div:focus": { outline: "none !important" },
-        "& div[aria-rowindex]": {
-          backgroundColor: `${backgroundColor} !important`,
-        },
       }}
       columnVisibilityModel={columnVisible}
       onColumnVisibilityModelChange={(e) => setColumnVisible(e)}

src/pages/connections.tsx

@@ -139,7 +139,15 @@ const ConnectionsPage = () => {
     <BasePage
       full
       title={<span style={{ whiteSpace: "nowrap" }}>{t("Connections")}</span>}
-      contentStyle={{ height: "100%" }}
+      contentStyle={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+        //    margin: "0 10px",
+        //  backgroundColor: isDark ? "#282a36" : "#ffffff",
+        borderRadius: "8px",
+      }}
       header={
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <Box sx={{ mx: 1 }}>
@@ -185,6 +193,10 @@ const ConnectionsPage = () => {
           display: "flex",
           alignItems: "center",
           userSelect: "text",
+          //     backgroundColor: isDark ? "#282a36" : "#ffffff",
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
         }}
       >
         {!isTableLayout && (
@@ -202,15 +214,6 @@ const ConnectionsPage = () => {
         <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>
 
-      <Box
-        height="calc(100% - 65px)"
-        sx={{
-          userSelect: "text",
-          margin: "10px",
-          borderRadius: "8px",
-          bgcolor: isDark ? "#282a36" : "#ffffff",
-        }}
-      >
       {filterConn.length === 0 ? (
         <BaseEmpty />
       ) : isTableLayout ? (
@@ -220,6 +223,11 @@ const ConnectionsPage = () => {
         />
       ) : (
         <Virtuoso
+          style={{
+            flex: 1,
+            //    backgroundColor: isDark ? "#282a36" : "#ffffff",
+            borderRadius: "8px",
+          }}
           data={filterConn}
           itemContent={(_, item) => (
             <ConnectionItem
@@ -229,7 +237,6 @@ const ConnectionsPage = () => {
           )}
         />
       )}
-      </Box>
       <ConnectionDetail ref={detailRef} />
     </BasePage>
   );

src/pages/logs.tsx

@@ -44,7 +44,12 @@ const LogPage = () => {
     <BasePage
       full
       title={t("Logs")}
-      contentStyle={{ height: "100%" }}
+      contentStyle={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+      }}
       header={
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <IconButton
@@ -102,18 +107,13 @@ const LogPage = () => {
         />
       </Box>
 
-      <Box
-        height="calc(100% - 65px)"
-        sx={{
-          margin: "10px",
-          borderRadius: "8px",
-          bgcolor: isDark ? "#282a36" : "#ffffff",
-        }}
-      >
       {filterLogs.length > 0 ? (
         <Virtuoso
           initialTopMostItemIndex={999}
           data={filterLogs}
+          style={{
+            flex: 1,
+          }}
           itemContent={(index, item) => (
             <LogItem value={item} searchState={searchState} />
           )}
@@ -122,7 +122,6 @@ const LogPage = () => {
       ) : (
         <BaseEmpty />
       )}
-      </Box>
     </BasePage>
   );
 };

src/pages/profiles.tsx

@@ -367,20 +367,19 @@ const ProfilePage = () => {
           {t("New")}
         </Button>
       </Stack>
-      <Box
+
-        sx={{
-          pt: 1,
-          mb: 0.5,
-          pl: "10px",
-          mr: "10px",
-          height: "calc(100% - 68px)",
-          overflowY: "auto",
-        }}
-      >
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
         onDragEnd={onDragEnd}
+      >
+        <Box
+          sx={{
+            pl: "10px",
+            pr: "10px",
+            height: "calc(100% - 68px)",
+            overflowY: "auto",
+          }}
         >
           <Box sx={{ mb: 1.5 }}>
             <Grid2 container spacing={{ xs: 1, lg: 1 }}>
@@ -412,7 +411,6 @@ const ProfilePage = () => {
               </SortableContext>
             </Grid2>
           </Box>
-        </DndContext>
           <Divider
             variant="middle"
             flexItem
@@ -444,6 +442,7 @@ const ProfilePage = () => {
             </Grid2>
           </Box>
         </Box>
+      </DndContext>
 
       <ProfileViewer
         ref={viewerRef}

src/pages/rules.tsx

@@ -39,7 +39,12 @@ const RulesPage = () => {
     <BasePage
       full
       title={t("Rules")}
-      contentStyle={{ height: "100%" }}
+      contentStyle={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+      }}
       header={
         <Box display="flex" alignItems="center" gap={1}>
           <ProviderButton />
@@ -59,20 +64,14 @@ const RulesPage = () => {
         <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>
 
-      <Box
-        height="calc(100% - 65px)"
-        sx={{
-          margin: "10px",
-          borderRadius: "8px",
-          bgcolor: isDark ? "#282a36" : "#ffffff",
-          position: "relative",
-        }}
-      >
       {rules.length > 0 ? (
         <>
           <Virtuoso
             ref={virtuosoRef}
             data={rules}
+            style={{
+              flex: 1,
+            }}
             itemContent={(index, item) => (
               <RuleItem index={index + 1} value={item} />
             )}
@@ -86,7 +85,6 @@ const RulesPage = () => {
       ) : (
         <BaseEmpty />
       )}
-      </Box>
     </BasePage>
   );
 };