admin: better layout on small screens for file-picker
Massimo Melina committed
Sep 21, 2025 at 12:28 UTC
d781efc49a5ab0debd59621954edd56379d41269
2 files changed
+4
-3
admin/src/FilePicker.ts
+3
-2
@@ -5,7 +5,7 @@ import { apiCall, useApiList } from './api'
5
import _ from 'lodash'
6
import { Alert, Box, Button, Checkbox, ListItemIcon, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
7
import { enforceFinal, formatBytes, isWindowsDrive, err2msg, basename, formatPerc } from './misc'
8
-import { spinner, Center, IconBtn, Flex, IconProgress } from './mui'
8
+import { spinner, Center, IconBtn, Flex, IconProgress, useBreakpoint } from './mui'
9
import { ArrowUpward, CreateNewFolder, Storage, VerticalAlignTop } from '@mui/icons-material'
10
import { StringField } from '@hfs/mui-grid-form'
11
import { FileIcon, FolderIcon } from './VfsTree'
@@ -47,6 +47,7 @@ export default function FilePicker({ onSelect, multiple=true, files=true, folder
47
return (v:string) => re.test(v)
48
}, [filter])
49
50
+ const sm = useBreakpoint('sm')
51
const [listHeight, setListHeight] = useState(0)
52
const filteredList = useMemo(() => _.sortBy(list.filter(it => filterMatch(it.n)), ['k', 'n']), [list,filterMatch])
53
const root = isWindows.current ? '' : '/'
@@ -148,7 +149,7 @@ export default function FilePicker({ onSelect, multiple=true, files=true, folder
149
onClick() {
150
onSelect(sel.length ? sel.map(x => cwdDelimiter + x) : [cwd])
151
}
151
- }, files && (sel.length || !folders) ? `Select (${sel.length})` : `Select this folder`),
152
+ }, files && (sel.length || !folders) ? `Select (${sel.length})` : sm ? "Select this folder" : "This folder"),
153
h(TextField, {
154
size: 'small',
155
value: filter,
admin/src/addFiles.ts
+1
-1
@@ -13,7 +13,7 @@ let lastFolder: undefined | string
13
export default function addFiles() {
14
const { close } = newDialog({
15
title: "Add files or folders",
16
- dialogProps: { sx:{ minWidth: 'min(90vw, 40em)', minHeight: 'calc(100vh - 9em)' } },
16
+ dialogProps: { sx:{ minWidth: 'min(80vw, 40em)', minHeight: 'calc(100vh - 9em)' } },
17
Content() {
18
const parent = getFolderFromSelected()
19
return h(Fragment, {},