From eae9bc4048d131b45bd1fae5f7c127ae4d662676 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Mon, 28 Jul 2025 13:32:03 -0700
Subject: [PATCH] sets canvas zindex behind sidebar/header

---
 client/src/components/layout/Canvas/Canvas.jsx |  5 ++++-
 client/src/components/layout/Dashboard.jsx     |  2 +-
 client/src/theme.js                            | 10 +++++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index bf4779e..3067854 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -2,7 +2,7 @@
 // the main canvas section of the web App with a default state
 // of 'WidgetCanvas' 
 
-import { Box } from "@chakra-ui/react";
+import { Box, useRecipe } from "@chakra-ui/react";
 import GlobalMapCanvas from "./views/GlobalMapCanvas";
 import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
@@ -10,6 +10,9 @@ import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
 export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
+  const recipe = useRecipe({ key: "canvas" });
+  const styles = recipe();
+
     return (
         <Box height="100%" width="100%">
             {view === "widget" && 
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index 3776da6..76275d5 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -6,7 +6,7 @@ import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
 import { useState } from 'react';
 
 export default function Dashboard() {
-  const recipe = useRecipe({ key: "canvas" });
+  const recipe = useRecipe({ key: "dashboard" });
   const styles = recipe();
 
   // Lifted State - defaults to widget dashboard
diff --git a/client/src/theme.js b/client/src/theme.js
index 879a494..e26676d 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -16,12 +16,19 @@ const headerRecipe = defineRecipe({
   }
 });
 
-const canvasRecipe = defineRecipe({
+const dashboardRecipe = defineRecipe({
   base: {
     bg: "{base200}"
   }
 });
 
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{base200}",
+    zIndex: "-1"
+  }
+});
+
 const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "close_button", "buttons", "dark_mode_button"],
   base: {
@@ -111,6 +118,7 @@ const config = defineConfig({
     },
     recipes: {
       header: headerRecipe,
+      dashboard: dashboardRecipe,
       canvas: canvasRecipe,
     },
     slotRecipes: {