remove +1 on modal calc

Author: KevinVandy

packages/material-react-table/src/components/table/MRT_TablePaper.tsx

@@ -1,5 +1,5 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
-import { useTheme } from '@mui/material'
+import { useTheme } from '@mui/material';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -61,7 +61,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
               right: 0,
               top: 0,
               width: '100dvw',
-              zIndex: theme.zIndex.modal + 1,
+              zIndex: theme.zIndex.modal,
             }
           : {}),
         ...paperProps?.style,

packages/material-react-table/stories/fixed-bugs/fullscreen-with-appbar.stories.tsx

@@ -1,122 +1,122 @@
 import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
 import { type Meta } from '@storybook/react';
-import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from '../../src';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+  type MRT_ColumnDef,
+} from '../../src';
 
 const meta: Meta = {
-    title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
+  title: 'Fixed Bugs/AppBar overlaps with Fullscreen Modal',
 };
 
 export default meta;
 
-
-
 //example data type
 type Person = {
-    name: {
-        firstName: string;
-        lastName: string;
-    };
-    address: string;
-    city: string;
-    state: string;
+  name: {
+    firstName: string;
+    lastName: string;
+  };
+  address: string;
+  city: string;
+  state: string;
 };
 
 //nested data is ok, see accessorKeys in ColumnDef below
 const data: Person[] = [
-    {
-        name: {
-            firstName: 'John',
-            lastName: 'Doe',
-        },
-        address: '261 Erdman Ford',
-        city: 'East Daphne',
-        state: 'Kentucky',
+  {
+    name: {
+      firstName: 'John',
+      lastName: 'Doe',
     },
-    {
-        name: {
-            firstName: 'Jane',
-            lastName: 'Doe',
-        },
-        address: '769 Dominic Grove',
-        city: 'Columbus',
-        state: 'Ohio',
+    address: '261 Erdman Ford',
+    city: 'East Daphne',
+    state: 'Kentucky',
+  },
+  {
+    name: {
+      firstName: 'Jane',
+      lastName: 'Doe',
     },
-    {
-        name: {
-            firstName: 'Joe',
-            lastName: 'Doe',
-        },
-        address: '566 Brakus Inlet',
-        city: 'South Linda',
-        state: 'West Virginia',
+    address: '769 Dominic Grove',
+    city: 'Columbus',
+    state: 'Ohio',
+  },
+  {
+    name: {
+      firstName: 'Joe',
+      lastName: 'Doe',
     },
-    {
-        name: {
-            firstName: 'Kevin',
-            lastName: 'Vandy',
-        },
-        address: '722 Emie Stream',
-        city: 'Lincoln',
-        state: 'Nebraska',
+    address: '566 Brakus Inlet',
+    city: 'South Linda',
+    state: 'West Virginia',
+  },
+  {
+    name: {
+      firstName: 'Kevin',
+      lastName: 'Vandy',
     },
-    {
-        name: {
-            firstName: 'Joshua',
-            lastName: 'Rolluffs',
-        },
-        address: '32188 Larkin Turnpike',
-        city: 'Omaha',
-        state: 'Nebraska',
+    address: '722 Emie Stream',
+    city: 'Lincoln',
+    state: 'Nebraska',
+  },
+  {
+    name: {
+      firstName: 'Joshua',
+      lastName: 'Rolluffs',
     },
+    address: '32188 Larkin Turnpike',
+    city: 'Omaha',
+    state: 'Nebraska',
+  },
 ];
 
 const columns: MRT_ColumnDef<Person>[] = [
-    {
-        accessorKey: 'name.firstName', //access nested data with dot notation
-        header: 'First Name',
-        size: 150,
-    },
-    {
-        accessorKey: 'name.lastName',
-        header: 'Last Name',
-        size: 150,
-    },
-    {
-        accessorKey: 'address', //normal accessorKey
-        header: 'Address',
-        size: 200,
-    },
-    {
-        accessorKey: 'city',
-        header: 'City',
-        size: 150,
-    },
-    {
-        accessorKey: 'state',
-        header: 'State',
-        size: 150,
-    },
+  {
+    accessorKey: 'name.firstName', //access nested data with dot notation
+    header: 'First Name',
+    size: 150,
+  },
+  {
+    accessorKey: 'name.lastName',
+    header: 'Last Name',
+    size: 150,
+  },
+  {
+    accessorKey: 'address', //normal accessorKey
+    header: 'Address',
+    size: 200,
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+    size: 150,
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+    size: 150,
+  },
 ];
 
-
 export const FullscreenIsAboveAppbar = () => {
+  const table = useMaterialReactTable({
+    columns,
+    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+  });
 
-
-    const table = useMaterialReactTable({
-        columns,
-        data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
-    });
-
-    return <>
-        <CssBaseline />
-        <AppBar position="sticky">
-            <Toolbar>
-                <p>App</p>
-            </Toolbar>
-        </AppBar>
-        <Box padding={2}>
-            <MaterialReactTable table={table} />
-        </Box>
-    </>;
+  return (
+    <>
+      <CssBaseline />
+      <AppBar position="sticky">
+        <Toolbar>
+          <p>App</p>
+        </Toolbar>
+      </AppBar>
+      <Box padding={2}>
+        <MaterialReactTable table={table} />
+      </Box>
+    </>
+  );
 };
-