Make z-index rationnal

src/components/Board/Cursors/Cursor.jsx

@@ -15,7 +15,7 @@ const StyledCursor = styled.div.attrs(({ top, left }) => ({
   display: flex;
   flex-direction: row;
   align-items: center;
-  z-index: 7;
+  z-index: 210;
 `;
 
 const CursorName = styled.div`

src/components/Board/Items/Item.jsx

@@ -256,7 +256,7 @@ const PositionedItem = ({
       style={{
         transform: `translate(${x}px, ${y}px)`,
         display: "inline-block",
-        zIndex: (layer || 0) + 3,
+        zIndex: ((layer || 0) + 4) * 10 + 100, // Items z-index between 100 and 200
         position: "absolute",
         top: 0,
         left: 0,

src/components/Board/Selector.jsx

@@ -32,7 +32,7 @@ const SelectorZone = styled.div.attrs(({ top, left, height, width }) => ({
     width: `${width}px`,
   },
 }))`
-  z-index: 100;
+  z-index: 210;
   position: absolute;
   background-color: hsla(0, 40%, 50%, 10%);
   border: 2px solid hsl(0, 55%, 40%);

src/components/SelectedItemsPane.jsx

@@ -97,7 +97,7 @@ const BoundingBoxZone = styled.div.attrs(({ top, left, height, width }) => ({
 }))`
   top: 0;
   left: 0;
-  z-index: 6;
+  z-index: 210;
   position: absolute;
   background-color: hsla(0, 40%, 50%, 0%);
   border: 1px dashed hsl(20, 55%, 40%);

src/react-confirm-alert.css

@@ -12,7 +12,7 @@ body.react-confirm-alert-body-element {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 99;
+  z-index: 260;
   background: rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;

src/ui/SidePanel.jsx

@@ -17,7 +17,7 @@ const StyledSidePanel = styled.div`
   ${({ position }) => (position === "right" ? "right: 0;" : "left: 0;")}
   top: 0;
   bottom: 0;
-  z-index: ${({ modal }) => (modal ? 32 : 22)};
+  z-index: ${({ modal }) => (modal ? 290 : 280)};
   display: flex;
   flex-direction: column;
   height: 100%;

src/ui/Waiter.jsx

@@ -14,7 +14,7 @@ const Overlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 295;
   font-size: 3em;
 `;
 

src/ui/formUtils/ColorPicker.jsx

@@ -19,7 +19,7 @@ const ColorPickerWrapper = styled.div`
   background-color: #151515b0;
   right: 0px;
   bottom: 0px;
-  z-index: 10002;
+  z-index: 290;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/BoardView/NavBar.jsx

@@ -31,7 +31,7 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 10;
+  z-index: 205;
 
   background-color: #19202ce0;
   box-shadow: 0px 3px 6px #00000029;

src/views/CookieNotice.jsx

@@ -7,7 +7,7 @@ const StyledNotice = styled.div`
   position: fixed;
   bottom: 1em;
   background-color: var(--color-blueGrey);
-  z-index: 100;
+  z-index: 210;
   right: 1em;
   display: flex;
   flex-direction: column;

src/views/RoomView/RoomNavBar.jsx

@@ -17,7 +17,7 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 10;
+  z-index: 205;
 
   background-color: #19202ce0;
   box-shadow: 0px 3px 6px #00000029;