From 43a96855747b5f9961c6b15e9f63ca9bd3cc52ef Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 12 Jun 2024 15:36:28 -0400
Subject: [PATCH] screenshots don't resize after cropping

---
 packages/feedback/src/modal/components/Dialog.css.ts      | 3 +--
 .../src/screenshot/components/ScreenshotEditor.tsx        | 8 +++++---
 .../src/screenshot/components/ScreenshotInput.css.ts      | 6 ++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
index ddcd90184657..76ac68f0d6d1 100644
--- a/packages/feedback/src/modal/components/Dialog.css.ts
+++ b/packages/feedback/src/modal/components/Dialog.css.ts
@@ -100,13 +100,12 @@ const FORM = `
 }
 
 .form__right {
-  width: var(--form-width, 272px);
+  min-width: var(--form-width, 272px);
   display: flex;
   overflow: auto;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
-  flex: 1 0 auto;
 }
 
 @media (max-width: 600px) {
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index da4217ca5d46..08bbdb780f45 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -94,8 +94,6 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
       if (cropButton) {
         cropButton.style.width = `${imageDimensions.width}px`;
         cropButton.style.height = `${imageDimensions.height}px`;
-        cropButton.style.left = `${imageDimensions.x}px`;
-        cropButton.style.top = `${imageDimensions.y}px`;
       }
 
       setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
@@ -212,6 +210,8 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
         ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
         imageBuffer.width = cutoutCanvas.width;
         imageBuffer.height = cutoutCanvas.height;
+        imageBuffer.style.width = `${cutoutCanvas.width}px`;
+        imageBuffer.style.height = `${cutoutCanvas.height}px`;
         ctx.drawImage(cutoutCanvas, 0, 0);
         resizeCropper();
       }
@@ -229,6 +229,8 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
           }
           imageBuffer.width = imageSource.videoWidth;
           imageBuffer.height = imageSource.videoHeight;
+          imageBuffer.style.width = '100%';
+          imageBuffer.style.height = '100%';
           context.drawImage(imageSource, 0, 0);
         },
         [imageBuffer],
@@ -249,7 +251,7 @@ export function makeScreenshotEditorComponent({ imageBuffer, dialog, options }:
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="editor__canvas-container" ref={canvasContainerRef}>
-          <div class="editor__crop-container" style={{ position: 'absolute' }} ref={cropContainerRef}>
+          <div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
             <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
             <CropCorner
               left={croppingRect.startX - CROP_BUTTON_BORDER}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 2a944abc42b5..d87293ad3fbe 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -37,12 +37,14 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .editor__canvas-container canvas {
-  width: 100%;
-  height: 100%;
   object-fit: contain;
+  position: relative;
 }
 
 .editor__crop-btn-group {