fix: fix position of toast/snackbar for bottom nav (#2213)

src/build/template.html

@@ -38,6 +38,7 @@
       --nav-bottom: 0px;
       --main-content-pad-top: 0px;
       --main-content-pad-bottom: var(--main-content-pad-vertical);
+      --toast-gap-bottom: var(--nav-total-height);
     }
   </style>
 

src/routes/_components/snackbar/Snackbar.html

@@ -21,14 +21,14 @@
 <style>
   .snackbar-modal {
     position: fixed;
-    bottom: 0;
+    bottom: var(--toast-gap-bottom);
     left: 0;
     right: 0;
     transition: transform 333ms ease-in-out;
     display: flex;
     flex-direction: column;
     align-items: center;
-    z-index: 99000;
+    z-index: 90; /* lower than the Nav.html .main-nav which is 100 */
     transform: translateY(100%);
   }
 

src/routes/_components/toast/Toast.html

@@ -6,7 +6,7 @@
 <style>
   .toast-modal {
     position: fixed;
-    bottom: 40px;
+    bottom: calc(40px + var(--toast-gap-bottom));
     left: 0;
     right: 0;
     opacity: 0;

src/scss/variables.scss

@@ -65,7 +65,7 @@
   // Used for moving the nav bar to the bottom
   --nav-top: 0px;
   --nav-bottom: initial;
-
+  --toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
 
   //
   // focus outline