feat(feedback): Screenshots don't resize after cropping (#12481)

Screenshots will no longer become larger to fit the screenshot area
after being cropped, instead it would remain the same size. The image
quality of the screenshot goes down if the image is cropped too much.
This could help make small crops a bit more readable.
Before:
<img width="1716" alt="Select a speeder"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/c99af75e-4cfc-41e2-86bc-f0232962f91a">
After:
<img width="1716" alt="Pasted Graphic"
src="https://github.com/getsentry/sentry-javascript/assets/55311782/1bd2b1ef-ef8c-4b6d-90fa-ae444141ede0">
Relates to #12329

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) {

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}

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 {