Extend background to covert context menu in file tree (#638)

okfn · Nov 12, 2024 · cafe1de · cafe1de
1 parent efec0af
commit cafe1de
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/client/components/Application/Layout.tsx b/client/components/Application/Layout.tsx
@@ -6,6 +6,8 @@ import Dialog from './Dialog'
 import Error from './Error'
 import * as store from '@client/store'
 
+export const fileMenuWidth = 284
+
 export default function Layout() {
   React.useEffect(() => {
     store.onAppStart().catch(console.error)
@@ -15,7 +17,7 @@ export default function Layout() {
     <React.Fragment>
       <Error />
       <Dialog />
-      <Box sx={{ display: 'grid', gridTemplateColumns: '284px 1fr' }}>
+      <Box sx={{ display: 'grid', gridTemplateColumns: `${fileMenuWidth}px 1fr` }}>
         <Sidebar />
         <Content />
       </Box>

diff --git a/client/components/Parts/Trees/File.tsx b/client/components/Parts/Trees/File.tsx
@@ -19,6 +19,7 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
+import { fileMenuWidth } from '@client/components/Application/Layout'
 import * as store from '@client/store'
 
 export interface FileTreeProps {
@@ -145,6 +146,14 @@ const StyledTreeItem = styled(
             '& > .MuiTreeItem-content .MuiTreeItem-label': {
               maxWidth: '172px',
             },
+            '& > .MuiTreeItem-content:hover': {
+              width: `${fileMenuWidth}px`,
+            },
+            '& > .MuiTreeItem-content.Mui-selected, & > .MuiTreeItem-content.Mui-selected.Mui-focused': {
+              zIndex: 0,
+              position: 'relative',
+              width: `${fileMenuWidth}px`
+            },
             '& + button': {
               position: 'sticky',
               right: 0