diff --git a/web/src/pages/harmonie/DrawView.tsx b/web/src/pages/harmonie/DrawView.tsx
index dad998a..80f0fe5 100644
--- a/web/src/pages/harmonie/DrawView.tsx
+++ b/web/src/pages/harmonie/DrawView.tsx
@@ -22,6 +22,7 @@ export const DrawView: Component<{
     createEffect(async () => {
         setIsLoading(true)
         const canvas = getCanvas()!
+        canvas.style.width = '100%'
         const ctx = canvas.getContext('2d')!
         ctx.clearRect(0, 0, canvas.width, canvas.height)
         const cropBounds = options.getIsCrop() ? CROP_BOUNDS : undefined
diff --git a/web/src/pages/harmonie/draw/drawGrib.ts b/web/src/pages/harmonie/draw/drawGrib.ts
index f825481..35eb7bf 100644
--- a/web/src/pages/harmonie/draw/drawGrib.ts
+++ b/web/src/pages/harmonie/draw/drawGrib.ts
@@ -185,8 +185,8 @@ export function drawRotate(
     tempCtx.restore()
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
-    canvas.width = 640*4 - 510 // -offset right
-    canvas.height = 540*1.7
+    canvas.width = 640*4 - 1000 // -offset right
+    canvas.height = 540*1.7 + 140
     // canvas.style.border = "1px solid red"
     // console.log(ctx.imageSmoothingEnabled, ctx.imageSmoothingQuality)
     if (isInterpolated) {