admin/fs: better layout

rejetto · Apr 15, 2024 · e9fa319 · e9fa319
1 parent 97ba141
commit e9fa319
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/admin/src/VfsMenuBar.ts b/admin/src/VfsMenuBar.ts
@@ -31,6 +31,7 @@ export default function VfsMenuBar({ statusApi }: { statusApi: ApiObject }) {
                 alertDialog(h(List, { dense: true }, res.map(x => h(ListItem, { key: x.name },
                     h(ListItemIcon, {}, h(Storage)),
                     h(ListItemText, {
+                        sx: { wordBreak: 'break-word' },
                         primary: x.name + prefix(' (', x.description, ')'),
                         secondary: formatDiskSpace(x)
                     }),

diff --git a/admin/src/VfsPage.ts b/admin/src/VfsPage.ts
@@ -74,9 +74,12 @@ export default function VfsPage() {
             title: selectedFiles.length > 1 ? "Multiple selection" :
                 h(Flex, {},
                     vfsNodeIcon(selectedFiles[0] as VfsNode),
-                    selectedFiles[0].name || "Home",
-                    h(Box, { color: 'text.secondary' }, ancestors.join(' / '))
+                    h(Flex, { flexWrap: 'wrap', gap: '0 0.5em' },
+                        selectedFiles[0].name || "Home",
+                        h(Box, { component: 'span', color: 'text.secondary' }, ancestors.join(' /'))
+                    )
                 ),
+            dialogProps: { sx: { justifyContent: 'flex-end' } },
             Content: () => sideContent,
             onClose() {
                 state.selectedFiles = []

diff --git a/admin/src/VfsTree.ts b/admin/src/VfsTree.ts
@@ -77,16 +77,15 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
                 sx: {
                     display: 'flex',
                     gap: '.5em',
-                    lineHeight: '2em',
-                    alignItems: 'center',
+                    minHeight: '1.8em', pt: '.2em', // comfy, make single-line ones taller
                 }
             },
                 h(Box, { display: 'flex', flex: 0, },
                     vfsNodeIcon(node),
                     // attributes
                     h(Box, { sx: {
                         flex: 0, ml: '2px', my: '2px', '&>*': { fontSize: '87%', opacity: .6, mt: '-2px' },
-                        display: 'grid', gridAutoFlow: 'column', gridTemplateRows: 'auto auto',
+                        display: 'grid', gridAutoFlow: 'column', gridTemplateRows: 'auto auto', height: '1em',
                     } },
                         node.can_delete !== undefined && iconTooltip(Delete, "Delete permission"),
                         node.can_upload !== undefined && iconTooltip(Upload, "Upload permission"),
@@ -104,8 +103,7 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
                     const ps = node.parent?.source
                     const { source } = node
                     const rel = ps && source?.startsWith(ps) ? '.' + source.slice(ps.length) : source
-                    return !rel || !source?.endsWith(name) || rel.length > 45
-                        ? h(Box, { lineHeight: '1.2em' }, name)
+                    return !rel || !source?.endsWith(name) || rel.length > 45 ? name
                         : h('span', {},
                             h('span', { style: { opacity: .4 } }, rel.slice(0,-name.length)),
                             rel.slice(-name.length),

diff --git a/admin/src/index.scss b/admin/src/index.scss
@@ -36,9 +36,7 @@ form { max-width: 100%; } // make fields with unbreakable text (LinkField) to no
 .MuiSvgIcon-root {
   vertical-align: bottom;
 }
-.MuiTreeItem-content {
-  box-sizing: border-box; /* avoid unwanted scrolling caused by its width:100% + padding */
-}
+div.MuiTreeItem-content { padding: 0; } // remove wasting horizontal padding
 .MuiDataGrid-columnHeaders {
   background-color: #8882;
 }