deep-foundation / deepcase-app

https://deep-foundation.github.io/deepcase-app/
The Unlicense
11 stars 7 forks source link

z-index of client handler overview window overlaps "modal-like component" #290

Open FreePhoenix888 opened 6 months ago

FreePhoenix888 commented 6 months ago

Description

https://github.com/deep-foundation/deepcase-app/assets/66206278/2ffdeee2-4b24-4b94-851b-6b72e372dba0

Client handler code to reproduce

async ({ deep }) => {
  const React = await deep.import('react');
  const { useState } = React;
  const MUI = await deep.import('@mui/material');
  const { ThemeProvider, createTheme, Select, THEME_ID, Paper, FormControl, MenuItem, InputLabel } = MUI;

  return () => {
    const [selectedModelLinkId, setSelectedModelLinkId] = useState('');

    const handleModelChange = (event) => {
      setSelectedModelLinkId(event.target.value);
    };

    const theme = createTheme({
      palette: {
        mode: 'dark',
      },
    })

    return (
      <ThemeProvider
        theme={{
          [THEME_ID]: theme
        }}
      >
        <Paper
          component="form"
          sx={{ padding: 5, borderRadius: 5 }}
        >
          <FormControl >
            <InputLabel>ChatGPT Model ID</InputLabel>
            <Select
              // Uncomment these lines to see dropmenu
              // MenuProps={{
              //   style: { zIndex: 35001 }
              // }}
              value={selectedModelLinkId}
              label="ChatGPT Model ID"
              onChange={handleModelChange}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>

        </Paper>
      </ThemeProvider>
    );
  };
};

Additional Info

This also happens with Popper This also happens with FinderPopover

https://github.com/deep-foundation/deepcase-app/assets/66206278/a1cb7c31-ed2d-4a25-93b3-b732d114fdfb