fix: update layout for new drawers

package.json

@@ -28,48 +28,48 @@
     ]
   },
   "dependencies": {
-    "@arcgis/core": "^4.30.9",
+    "@arcgis/core": "^4.31.1",
     "@heroicons/react": "^2.1.5",
-    "@ugrc/layer-selector": "^6.2.8",
-    "@ugrc/utah-design-system": "^1.9.6",
-    "firebase": "^10.14.0",
+    "@ugrc/layer-selector": "^6.2.9",
+    "@ugrc/utah-design-system": "^1.15.1",
+    "firebase": "^11.0.1",
     "ky": "^1.7.2",
     "lodash.startcase": "^4.4.0",
     "react": "^18.3.1",
-    "react-aria": "^3.35.0",
-    "react-aria-components": "^1.4.0",
+    "react-aria": "^3.35.1",
+    "react-aria-components": "^1.4.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.13",
+    "react-error-boundary": "^4.1.2",
     "react-fast-compare": "^3.2.2",
-    "react-stately": "^3.32.2"
+    "react-stately": "^3.33.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
+    "@eslint/js": "^9.14.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@ugrc/tailwind-preset": "^1.0.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@ugrc/tailwind-preset": "^1.1.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.11.1",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc-06d0b89e-20240801",
-    "globals": "^15.9.0",
-    "postcss": "^8.4.47",
+    "globals": "^15.12.0",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-packagejson": "^2.5.2",
+    "prettier-plugin-packagejson": "^2.5.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-react-aria-components": "^1.1.6",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.8.0",
-    "vite": "^5.4.8",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.14.0",
+    "vite": "^5.4.11",
     "vite-plugin-package-version": "^1.1.0",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.5"
   }
 }

src/App.tsx

@@ -110,7 +110,7 @@ export default function App() {
     wkid: config.WEB_MERCATOR_WKID,
     pointSymbol: {
       type: 'simple-marker',
-      style: 'diamond',
+      style: 'diamond' as const,
       color: config.MARKER_FILL_COLOR,
       size: 20,
       outline: {
@@ -190,7 +190,7 @@ export default function App() {
             </h2>
           </div>
         </Header>
-        <section className="relative flex min-h-0 flex-1 gap-2 overflow-x-hidden md:mr-2">
+        <section className="relative flex min-h-0 flex-1 overflow-x-hidden md:mr-2">
           <Drawer main state={sideBarState} {...sideBarTriggerProps}>
             <div className="mx-2 mb-2 grid grid-cols-1 gap-2">
               <h2 className="text-xl font-bold">Map controls</h2>

src/components/contexts/MapProvider.tsx

@@ -4,10 +4,11 @@ import { useGraphicManager } from '@ugrc/utilities/hooks';
 import PropTypes from 'prop-types';
 import { createContext, ReactNode, useState } from 'react';
 
+type GraphicOptions = Graphic | Graphic[] | null;
 export const MapContext = createContext<{
   mapView: MapView | null;
-  setMapView: (mapView: MapView) => void;
-  placeGraphic: (graphic: Graphic | Graphic[] | null) => void;
+  setMapView: (mapView: MapView | null) => void;
+  placeGraphic: (graphic: GraphicOptions) => void;
   zoom: (geometry: __esri.GoToTarget2D) => void;
 } | null>(null);
 
@@ -25,7 +26,7 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     mapView.goTo(geometry);
   };
 
-  const placeGraphic = (graphic: Graphic | Graphic[] | null): void => {
+  const placeGraphic = (graphic: GraphicOptions): void => {
     setGraphic(graphic);
   };
 

src/config.ts

@@ -0,0 +1,8 @@
+const config = {
+  MIN_DESKTOP_WIDTH: 768,
+  WEB_MERCATOR_WKID: 3857,
+  MARKER_FILL_COLOR: [234, 202, 0, 0.5] as [number, number, number, number],
+  MARKER_OUTLINE_COLOR: [77, 42, 84, 1] as [number, number, number, number],
+};
+
+export default config;

src/ugrc.d.ts

@@ -1,3 +1 @@
-declare module '@ugrc/utilities/hooks';
 declare module '@ugrc/layer-selector';
-declare module '@ugrc/utah-design-system';