style: refine acrylic workbench surfaces

features/workbench/map/camera.ts

@@ -1,4 +1,7 @@
 import type { Map as MapLibreMap, PaddingOptions } from "maplibre-gl";
+import {
+  getWorkbenchCameraPadding
+} from "../layout/workbench-layout";
 import { WATER_NETWORK_GLOBAL_VIEW } from "./sources";
 
 type LngLatBounds = [[number, number], [number, number]];
@@ -11,14 +14,11 @@ export type NetworkViewParams = {
 const WEB_MERCATOR_RADIUS = 6378137;
 const GLOBAL_VIEW_MAX_ZOOM = 12;
 const GLOBAL_VIEW_PADDING: PaddingOptions = { top: 48, right: 48, bottom: 48, left: 48 };
-
 export function getWorkbenchPadding(leftPanelOpen: boolean, rightPanelOpen: boolean): PaddingOptions {
-  return {
-    top: 88,
-    left: leftPanelOpen ? 530 : 88,
-    right: rightPanelOpen ? 430 : 120,
-    bottom: 96
-  };
+  return getWorkbenchCameraPadding(1280, {
+    agentOpen: leftPanelOpen,
+    conditionOpen: rightPanelOpen
+  });
 }
 
 export function getResponsiveWorkbenchPadding(
@@ -26,7 +26,14 @@ export function getResponsiveWorkbenchPadding(
   leftPanelOpen: boolean,
   rightPanelOpen: boolean
 ): PaddingOptions {
-  return getResponsivePadding(map, getWorkbenchPadding(leftPanelOpen, rightPanelOpen));
+  const width = getMapViewportSize(map).width;
+  return getResponsivePadding(
+    map,
+    getWorkbenchCameraPadding(width, {
+      agentOpen: leftPanelOpen,
+      conditionOpen: rightPanelOpen
+    })
+  );
 }
 
 export function fitNetworkBounds(
@@ -44,10 +51,8 @@ export function fitNetworkBounds(
   );
 }
 
-function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions): PaddingOptions {
-  const canvas = map.getCanvas();
-  const width = canvas.clientWidth || canvas.width;
-  const height = canvas.clientHeight || canvas.height;
+export function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions): PaddingOptions {
+  const { width, height } = getMapViewportSize(map);
   const horizontalPadding = padding.left + padding.right;
   const verticalPadding = padding.top + padding.bottom;
   const maxHorizontalPadding = width * 0.58;
@@ -68,6 +73,14 @@ function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions): Paddin
   };
 }
 
+function getMapViewportSize(map: MapLibreMap) {
+  const canvas = map.getCanvas();
+  return {
+    width: canvas.clientWidth || canvas.width,
+    height: canvas.clientHeight || canvas.height
+  };
+}
+
 function getLngLatBoundsFromBbox3857(bbox3857: WebMercatorBbox): LngLatBounds {
   const [minX, minY, maxX, maxY] = bbox3857;