Scaling the canvas inside the feedback modal

Author: ryan953

packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts

@@ -6,20 +6,45 @@ import { DOCUMENT } from '../../constants';
 export function createScreenshotInputStyles(): HTMLStyleElement {
   const style = DOCUMENT.createElement('style');
 
+  const surface200 = '#FAF9FB';
+  const gray100 = '#F0ECF3';
+
   style.textContent = `
 .dialog__content:has(.editor) {
   top: var(--bottom);
   left: var(--right);
 }
 
 .editor {
-  background: red;
+  display: flex;
+  flex: 1 0 auto;
+
+  background-color: ${surface200};
+  background-image: repeating-linear-gradient(
+      -145deg,
+      transparent,
+      transparent 8px,
+      ${surface200} 8px,
+      ${surface200} 11px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 15px,
+      ${gray100} 15px,
+      ${gray100} 16px
+    );
+}
+
+.canvasContainer {
   flex: 1 0 auto;
+  display: contents;
 }
 
-.editor .image {
-  width: 100%;
-  height: 100%;
+.canvasContainer canvas {
+  flex: 1 0 auto;
+  width: 0; /* reasons... */
+  align-self: center;
 }
 `;
 

packages/feedback2/src/screenshot/components/ScreenshotInput.tsx

@@ -28,8 +28,8 @@ export function makeInput(h: typeof hType, canvas: HTMLCanvasElement, dialog: Di
           if (!context) {
             throw new Error('Could not get canvas context');
           }
-          // canvas.width = imageSource.videoWidth;
-          // canvas.height = imageSource.videoHeight;
+          canvas.width = imageSource.videoWidth;
+          canvas.height = imageSource.videoHeight;
           context.drawImage(imageSource, 0, 0);
         },
         [canvas],
@@ -42,7 +42,7 @@ export function makeInput(h: typeof hType, canvas: HTMLCanvasElement, dialog: Di
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
-        <div ref={canvasContainerRef} />
+        <div class="canvasContainer" ref={canvasContainerRef} />
       </div>
     );
   };