replace z-index with isolate

DEVELOPING.md

@@ -16,39 +16,39 @@ The executables `git` and `node` should be in your `PATH`.
 
 To install the Node.js dependencies run
 
-    $ npm install
+    npm install
 
 Please check the full list of dependencies as defined in the [package.json](https://github.com/GEOLYTIX/xyz/blob/main/package.json)
 
 ## ESBuild
 
 The MAPP and MAPP.UI library must be build with [esbuild](https://esbuild.github.io/) prior to launching the host.
 
-    $ npx esbuild ./lib/mapp.mjs ./lib/ui.mjs --bundle --minify --tree-shaking=false --sourcemap --format=iife --outdir=./public/js/lib
+    npx esbuild ./lib/mapp.mjs ./lib/ui.mjs --bundle --minify --tree-shaking=false --sourcemap --format=iife --outdir=./public/js/lib
 
 The build command is stored in the package.json as `_build` script.
 
-    $ npm run _build
+    npm run _build
 
 ESBuild must also be used to compile the CSS supporting the MAPP and MAPP.UI elements.
 
-    $ npx esbuild --bundle public/css/_mapp.css --outfile=public/css/mapp.css
+    npx esbuild --bundle public/css/_mapp.css --outfile=public/css/mapp.css
 
-    $ npx esbuild --bundle public/css/_ui.css --outfile=public/css/ui.css --loader:.svg=dataurl
+    npx esbuild --bundle public/css/_ui.css --outfile=public/css/ui.css --loader:.svg=dataurl
 
 ## version.js hash
 
 The mapp module object holds a hash of the latest release commit which can be generated by executing the version.js script in the root.
 
 The version script will complete by executing the ESBuild process.
 
-    $ node version.js
+    node version.js
 
 ## Express
 
 [Express.js](https://expressjs.com/) will be installed by npm as a development dependency. You can run a zero config instance by loading the express.js script in your node runtime.
 
-    $ node express.js
+    node express.js
 
 The default port is 3000. You can access the mapp interface on <http://localhost:3000/> in your browser.
 

public/css/_dialog.css

@@ -19,7 +19,7 @@ dialog.dialog {
   user-select: none;
   padding: 5px;
   overflow: unset !important;
-  z-index: 5;
+  isolation: isolate;
 }
 
 dialog.modal {

public/css/_inputs.css

@@ -73,8 +73,8 @@ input[type=search]+ul:active {
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration:hover,
-input[type="search"]::-webkit-search-cancel-button:hover { 
-  cursor:pointer; 
+input[type="search"]::-webkit-search-cancel-button:hover {
+  cursor: pointer;
 }
 
 label.checkbox {
@@ -243,9 +243,10 @@ label.checkbox {
 
     &>.head>.icon {
       content: url("../icons/icon-drop-up.svg");
-    }  
+    }
   }
-  &.dropdown-reverse > ul {
+
+  &.dropdown-reverse>ul {
     bottom: 30px;
   }
 }
@@ -291,13 +292,13 @@ label.checkbox {
     z-index: 2;
     width: calc((var(--a) - var(--min)) / var(--dif) * (100% - 10px));
   }
-   
+
   &.multi {
-    & >.label-row {
+    &>.label-row {
       display: flex;
       justify-content: space-between;
 
-      & >div {
+      &>div {
         flex-grow: 1
       }
     }
@@ -384,4 +385,4 @@ label.checkbox {
   background-repeat: no-repeat;
   background-position: center;
   box-shadow: none;
-}
+}

public/css/ui.css

@@ -253,7 +253,7 @@ dialog.dialog {
   user-select: none;
   padding: 5px;
   overflow: unset !important;
-  z-index: 5;
+  isolation: isolate;
 }
 dialog.modal {
   position: fixed;