diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html
index c5107af..27592e7 100644
--- a/inventory/templates/testing.html
+++ b/inventory/templates/testing.html
@@ -7,15 +7,10 @@
 }
 
 #grid {
-    {#
-    background-image:
-        linear-gradient(to right, #ccc 1px, transparent 1px),
-        linear-gradient(to bottom, #ccc 1px, transparent 1px);
-    background-size: var(--grid) var(--grid);
-    #}
     cursor: crosshair;
     height: 80vh;
     width: 100%;
+    touch-action: none;
 }
 
 @supports (height: calc(round(nearest, 80vh, {{ grid_size }}px))) {
@@ -201,6 +196,9 @@ let selectedColor;
 let currentShape = null;
 let shapes = loadShapes();
 
+const ro = new ResizeObserver(() => resizeAndSetupCanvas());
+ro.observe(gridEl);
+
 const savedTool = localStorage.getItem('gridTool');
 if (savedTool) {
     setActiveTool(savedTool);
@@ -220,13 +218,6 @@ function pxToGrid(v) {
     return v / {{ grid_size }};
 }
 
-function axisMode(type, axis) {
-    if (type === 'fullGrid') return 'grid';
-    if (type === 'verticalGrid') return axis === 'x' ? 'grid' : 'px';
-    if (type === 'horizontalGrid') return axis === 'y' ? 'grid' : 'px';
-    return 'px'; // noGrid
-}
-
 function getActiveTool() {
     const checked = document.querySelector('input[name="tool"]:checked');
     return checked ? checked.id : 'outline';
@@ -289,20 +280,6 @@ function snapToGrid(x, y) {
     };
 }
 
-function normRange(a1, a2, mode, grid) {
-    if (mode === 'grid') {
-        const i1 = Math.round(a1 / grid);
-        const i2 = Math.round(a2 / grid);
-        const start = Math.min(i1, i2);
-        const size = Math.abs(i2 - i1);
-        return { start, size };
-    } else {
-        const start = Math.min(a1, a2);
-        const size = Math.abs(a2 - a1);
-        return { start, size };
-    }
-}
-
 function normalizeRect(shape) {
     const x1 = pxToGrid(shape.x1);
     const y1 = pxToGrid(shape.y1);