fix: Remove redundant zindex values (#1257)

* sane zindex values

* Removed z-indices

* Reverted ShadCN example

---------

Co-authored-by: matthewlipski <[email protected]>
Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx

@@ -73,7 +73,7 @@ export const Alert = createReactBlockSpec(
       return (
         <div className={"alert"} data-alert-type={props.block.props.type}>
           {/*Icon which opens a menu to choose the Alert type*/}
-          <Menu withinPortal={false} zIndex={999999}>
+          <Menu withinPortal={false}>
             <Menu.Target>
               <div className={"alert-icon-wrapper"} contentEditable={false}>
                 <Icon

examples/03-ui-components/07-suggestion-menus-slash-menu-component/styles.css

@@ -1,41 +1,40 @@
 .slash-menu {
-    z-index: 9999;
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  box-shadow: 0 0 8px #dddddd;
 
-    background-color: white;
-    border: 1px solid lightgray;
-    border-radius: 2px;
-    box-shadow: 0 0 8px #dddddd;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: fit-content;
+  max-height: 100%;
 
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    height: fit-content;
-    max-height: 100%;
+  overflow: auto;
 
-    overflow: auto;
+  padding: 8px;
 
-    padding: 8px;
-
-    top: 8px;
+  top: 8px;
 }
 
 .slash-menu-item {
-    background-color: white;
-    border: 1px solid lightgray;
-    border-radius: 2px;
-    box-shadow: 0 0 4px #dddddd;
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  box-shadow: 0 0 4px #dddddd;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    font-size: 16px;
+  font-size: 16px;
 
-    align-items: center;
-    display: flex;
-    flex-direction: row;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 
-    padding: 8px;
+  padding: 8px;
 }
 
-.slash-menu-item:hover, .slash-menu-item.selected {
-    background-color: lightgray;
-}
+.slash-menu-item:hover,
+.slash-menu-item.selected {
+  background-color: lightgray;
+}

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/styles.css

@@ -1,41 +1,40 @@
 .emoji-picker {
-    z-index: 9999;
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  box-shadow: 0 0 8px #dddddd;
 
-    background-color: white;
-    border: 1px solid lightgray;
-    border-radius: 2px;
-    box-shadow: 0 0 8px #dddddd;
+  display: grid;
+  flex-direction: column;
+  gap: 8px;
+  height: fit-content;
+  max-height: 100%;
 
-    display: grid;
-    flex-direction: column;
-    gap: 8px;
-    height: fit-content;
-    max-height: 100%;
+  overflow: auto;
 
-    overflow: auto;
+  padding: 8px;
 
-    padding: 8px;
-
-    top: 8px;
+  top: 8px;
 }
 
 .emoji-picker-item {
-    background-color: white;
-    border: 1px solid lightgray;
-    border-radius: 2px;
-    box-shadow: 0 0 4px #dddddd;
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 2px;
+  box-shadow: 0 0 4px #dddddd;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    font-size: 16px;
+  font-size: 16px;
 
-    align-items: center;
-    display: flex;
-    flex-direction: row;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 
-    padding: 8px;
+  padding: 8px;
 }
 
-.emoji-picker-item:hover, .emoji-picker-item.selected {
-    background-color: lightgray;
-}
+.emoji-picker-item:hover,
+.emoji-picker-item.selected {
+  background-color: lightgray;
+}

examples/06-custom-schema/01-alert-block/Alert.tsx

@@ -71,7 +71,7 @@ export const Alert = createReactBlockSpec(
       return (
         <div className={"alert"} data-alert-type={props.block.props.type}>
           {/*Icon which opens a menu to choose the Alert type*/}
-          <Menu withinPortal={false} zIndex={999999}>
+          <Menu withinPortal={false}>
             <Menu.Target>
               <div className={"alert-icon-wrapper"} contentEditable={false}>
                 <Icon

packages/mantine/src/popover/Popover.tsx

@@ -16,11 +16,7 @@ export const Popover = (
   assertEmpty(rest);
 
   return (
-    <MantinePopover
-      withinPortal={false}
-      zIndex={10000}
-      opened={opened}
-      position={position}>
+    <MantinePopover withinPortal={false} opened={opened} position={position}>
       {children}
     </MantinePopover>
   );

packages/shadcn/src/style.css

@@ -79,10 +79,6 @@
   text-decoration: revert;
 }
 
-.bn-shadcn [data-radix-popper-content-wrapper] {
-  z-index: 99999 !important;
-}
-
 .bn-shadcn .bn-editor:focus-visible {
   outline: none;
 }