fix: admin/monitoring: bad scrolling with many connections
Massimo Melina committed
May 21, 2025 at 11:15 UTC
8a065aea00dda53f931d6578fda799a764a7e849
4 files changed
+12
-8
admin/src/App.ts
+2
-2
@@ -16,6 +16,7 @@ import { useSnapState } from './state'
16
import { useEventListener } from 'usehooks-ts'
17
import { AriaOnly, isMac, xlate } from './misc'
18
import { getLocale } from './locale'
19
+import { fillFlexParentSx } from './DataTable'
20
21
// always use useMemo with setTitleSide
22
export interface PageProps { setTitleSide: (content: ReactNode, fullWidth?: boolean) => void }
@@ -103,8 +104,7 @@ function Routed() {
104
pb: { xs, md: 2 },
105
boxSizing: 'border-box', // keep padding inside the viewport
106
position: 'relative',
106
- display: 'flex',
107
- flexDirection: 'column',
107
+ ...fillFlexParentSx,
108
width: '100%',
109
overflowX: 'clip', // keep wide things in space
110
}
admin/src/DataTable.ts
+4
-1
@@ -143,7 +143,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
143
ref: sizeGrid.refToPass,
144
...rest,
145
sx: {
146
- ...fillFlex && { height: 0, flex: 'auto' }, // limit table to available screen space, if parent is flex
146
+ ...fillFlex && { height: 0, flex: 'auto' }, // limit table to available screen space, if parent is flex. Consider using fillFlexParentSx
147
'& .MuiDataGrid-virtualScroller': { minHeight: '3em' }, // without this, no-entries gets just 1px
148
'& .MuiTablePagination-root': { scrollbarWidth: 'none'},
149
...rest.sx,
@@ -227,3 +227,6 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
227
function CustomFooter({ add, ...props }: { add: ReactNode }) {
228
return h(GridFooterContainer, props, h(Box, { ml: { sm: 1 } }, add), h(GridFooter, { sx: { border: 'none' } }))
229
}
230
+
231
+// required in case of fillFlex:true
232
+export const fillFlexParentSx = { display: 'flex', flexDirection: 'column' } as const
\ No newline at end of file
admin/src/LangPage.ts
+2
-2
@@ -2,7 +2,7 @@
2
3
import { createElement as h, Fragment, useEffect, useMemo, useState } from 'react';
4
import { apiCall, useApiEx, useApiList } from './api'
5
-import { DataTable } from './DataTable';
5
+import { DataTable, fillFlexParentSx } from './DataTable'
6
import { Alert, Box } from '@mui/material'
7
import { Delete, Upload } from '@mui/icons-material'
8
import { CFG, readFile, selectFiles } from './misc'
@@ -19,7 +19,7 @@ export default function LangPage({ setTitleSide }: PageProps) {
19
h(Alert, { severity: 'info', sx: { display: { xs: 'none', sm: 'inherit' } } }, "Translation is limited to Front-end, it doesn't apply to Admin-panel"),
20
[]))
21
return h(Fragment, {},
22
- h(Box, { mt: 1, maxWidth: '50em', flex: 1, display: 'flex', flexDirection: 'column' },
22
+ h(Box, { mt: 1, maxWidth: '50em', flex: 1, ...fillFlexParentSx },
23
h(Box, { mb: 1, display: 'flex' },
24
h(Btn, { icon: Upload, onClick: add }, "Add"),
25
h(Box, { flex: 1 }),
admin/src/MonitorPage.ts
+4
-3
@@ -5,7 +5,7 @@ import { createElement as h, useMemo, Fragment, useState } from "react"
5
import { apiCall, useApiEvents, useApiEx, useApiList } from "./api"
6
import { LinkOff as DisconnectIcon, Lock, FolderZip, Upload, Download, ChevronRight, ChevronLeft, History } from '@mui/icons-material'
7
import { Alert, Box, Chip, ChipProps, Grid } from '@mui/material'
8
-import { DataTable } from './DataTable'
8
+import { DataTable, fillFlexParentSx } from './DataTable'
9
import {
10
formatBytes, ipForUrl, CFG, formatSpeed, with_, createDurationFormatter, formatTimestamp, formatPerc, md, Callback,
11
reactJoin, SPECIAL_URI,
@@ -141,11 +141,12 @@ function Connections() {
141
wantLogButton),
142
),
143
h(Grid, { container: true, flex: 1, columnSpacing: 1 },
144
- h(Grid, { item: true, xs: 12 - logSize },
144
+ h(Grid, { item: true, xs: 12 - logSize, sx: fillFlexParentSx },
145
h(DataTable, {
146
persist: 'connections',
147
error,
148
rows,
149
+ fillFlex: true,
150
noRows: monitorOnlyFiles && "No downloads/uploads at the moment",
151
footerSide: () => h(Flex, {},
152
pauseButton,
@@ -266,7 +267,7 @@ function Connections() {
267
]
268
}),
269
),
269
- logAble && wantLog && h(Grid, { item: true, xs: logSize, display: 'flex', flexDirection: 'column' },
270
+ logAble && wantLog && h(Grid, { item: true, xs: logSize, ...fillFlexParentSx },
271
h(LogFile, {
272
file: `${CFG.log}|${CFG.error_log}`,
273
filter: monitorOnlyFiles ? (row => !row.uri.startsWith(SPECIAL_URI)) : undefined,