looks good with responsevness

src/pages/drawing/temp.astro

@@ -0,0 +1,82 @@
+<script is:inline>
+   function create() {
+    // Adjust the positions and sizes of elements based on screen size
+    const screenWidth = game.scale.width;
+    const screenHeight = game.scale.height;
+
+    if (screenWidth <= 768) {
+        // Adjust elements for mobile screens
+        // You can modify these values as needed
+        // Example: Move a button to the top-right corner
+        button.x = screenWidth - button.width;
+        button.y = 0;
+    } else {
+        // Adjust elements for larger screens
+        // Example: Move a button to the bottom-right corner
+        button.x = screenWidth - button.width;
+        button.y = screenHeight - button.height;
+    }
+
+    // ... other element adjustments ...
+}
+
+
+</script>
+
+
+
+<!-- <script is:inline>
+    const isMobile = window.innerWidth <= 768; // You can adjust the breakpoint as needed
+
+const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: isMobile ? 0 : window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: isMobile ? window.innerHeight : window.innerHeight / 2,
+};
+
+// ...
+
+function create() {
+    // ...
+
+    // Position UI elements based on screen size
+    const colorPickerX = isMobile ? 10 : 20;
+    const colorPickerY = isMobile ? 10 : '10%';
+    colorPicker.style.position = 'absolute';
+    colorPicker.style.top = colorPickerY;
+    colorPicker.style.left = `${colorPickerX}px`;
+
+    const sliderContainerX = isMobile ? 10 : '5%';
+    const sliderContainerY = isMobile ? 10 : '10%';
+    sliderContainer.style.position = 'absolute';
+    sliderContainer.style.top = sliderContainerY;
+    sliderContainer.style.left = sliderContainerX;
+
+    const clearButtonX = isMobile ? 10 : '5%';
+    const clearButtonY = isMobile ? 20 : '20%';
+    clearButton.style.position = 'absolute';
+    clearButton.style.top = clearButtonY;
+    clearButton.style.left = clearButtonX;
+
+    const eraserButtonX = isMobile ? 10 : '5%';
+    const eraserButtonY = isMobile ? 14 : '14%';
+    eraserButton.style.position = 'absolute';
+    eraserButton.style.top = eraserButtonY;
+    eraserButton.style.left = eraserButtonX;
+
+    // ...
+
+    // Adjust cursor size based on screen size
+    const cursorSizeMultiplier = isMobile ? 0.5 : 1;
+
+    // ...
+
+    // Adjust the borderGraphics position and size
+    borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+
+    // ...
+}
+
+</script>
+ -->